├── .nvmrc
├── apps
├── .gitkeep
└── geometricpanda
│ ├── src
│ ├── assets
│ │ └── .gitkeep
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── polyfills.ts
│ ├── main.tsx
│ ├── index.html
│ ├── app
│ │ ├── star.svg
│ │ ├── app.spec.tsx
│ │ ├── logo.svg
│ │ └── app.tsx
│ └── stories
│ │ ├── iframe.stories.mdx
│ │ └── badges.stories.mdx
│ ├── .babelrc
│ ├── babel-jest.config.json
│ ├── .storybook
│ ├── preview-head.html
│ ├── main.js
│ ├── tsconfig.json
│ ├── preview.ts
│ └── webpack.config.js
│ ├── jest.config.js
│ ├── tsconfig.json
│ ├── tsconfig.spec.json
│ ├── .eslintrc.json
│ ├── .browserslistrc
│ └── tsconfig.app.json
├── libs
├── .gitkeep
├── storybook-addon-badges
│ ├── .npmignore
│ ├── src
│ │ ├── register.js
│ │ ├── index.ts
│ │ ├── preset.js
│ │ └── lib
│ │ │ ├── blocks
│ │ │ ├── __snapshots__
│ │ │ │ └── badge.spec.tsx.snap
│ │ │ ├── withBadgeTooltip.tsx
│ │ │ ├── badge.tsx
│ │ │ └── badges.tsx
│ │ │ ├── register.tsx
│ │ │ ├── manager.tsx
│ │ │ ├── types.ts
│ │ │ ├── helpers
│ │ │ ├── helpers.ts
│ │ │ └── helpers.spec.ts
│ │ │ └── shared.ts
│ ├── media
│ │ ├── icon.png
│ │ └── screenshot.png
│ ├── .babelrc
│ ├── babel-jest.config.json
│ ├── tsconfig.spec.json
│ ├── tsconfig.json
│ ├── tsconfig.lib.json
│ ├── .eslintrc.json
│ ├── jest.config.js
│ ├── LICENCE.md
│ ├── package.json
│ └── README.md
└── storybook-addon-iframe
│ ├── src
│ ├── register.js
│ ├── index.ts
│ ├── lib
│ │ ├── blocks
│ │ │ ├── index.ts
│ │ │ ├── iframe.tsx
│ │ │ ├── __snapshots__
│ │ │ │ └── iframe.spec.tsx.snap
│ │ │ └── iframe-container.tsx
│ │ ├── layouts
│ │ │ ├── index.ts
│ │ │ ├── __snapshots__
│ │ │ │ ├── generic-layout.spec.tsx.snap
│ │ │ │ └── embedded-iframe-layout.spec.tsx.snap
│ │ │ ├── generic-layout.tsx
│ │ │ └── embedded-iframe-layout.tsx
│ │ ├── icons
│ │ │ ├── index.ts
│ │ │ ├── not-found.tsx
│ │ │ ├── error.tsx
│ │ │ └── speed.tsx
│ │ ├── shared.ts
│ │ ├── register.tsx
│ │ └── manager.tsx
│ └── preset.js
│ ├── media
│ ├── icon.png
│ └── screenshot.png
│ ├── .babelrc
│ ├── babel-jest.config.json
│ ├── tsconfig.spec.json
│ ├── tsconfig.json
│ ├── tsconfig.lib.json
│ ├── .eslintrc.json
│ ├── jest.config.js
│ ├── package.json
│ └── README.md
├── tools
├── generators
│ └── .gitkeep
└── tsconfig.tools.json
├── .prettierrc
├── babel.config.json
├── .netlify
└── state.json
├── media
└── header.png
├── .prettierignore
├── jest.preset.js
├── jest.config.js
├── .storybook
├── tsconfig.json
├── main.js
└── webpack.config.js
├── .editorconfig
├── .github
├── workflows
│ ├── inclusive-language.yml
│ └── codeql-analysis.yml
└── ISSUE_TEMPLATE
│ ├── 4-security-issue-disclosure.md
│ ├── 2-feature-request.md
│ ├── 3-docs-bug.md
│ └── 1-bug-report.md
├── SECURITY.md
├── .gitignore
├── tsconfig.base.json
├── .eslintrc.json
├── nx.json
├── README.md
├── package.json
├── CHANGELOG.md
├── .circleci
└── config.yml
├── workspace.json
└── PROJECT_ATTRIBUTION.md
/.nvmrc:
--------------------------------------------------------------------------------
1 | 14
2 |
--------------------------------------------------------------------------------
/apps/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/libs/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tools/generators/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/.npmignore:
--------------------------------------------------------------------------------
1 | media
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true
3 | }
4 |
--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [],
3 | "babelrcRoots": ["*"]
4 | }
5 |
--------------------------------------------------------------------------------
/.netlify/state.json:
--------------------------------------------------------------------------------
1 | {
2 | "siteId": "f67daf6a-79f7-49b2-a6f4-f5aa096a7bb2"
3 | }
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/register.js:
--------------------------------------------------------------------------------
1 | require('./storybook-addon-badges.umd.js');
2 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/register.js:
--------------------------------------------------------------------------------
1 | require('./storybook-addon-iframe.umd.js');
2 |
--------------------------------------------------------------------------------
/media/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimdrury/geometricpanda/HEAD/media/header.png
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Add files here to ignore them from prettier formatting
2 |
3 | /dist
4 | /coverage
5 |
--------------------------------------------------------------------------------
/jest.preset.js:
--------------------------------------------------------------------------------
1 | const nxPreset = require('@nrwl/jest/preset');
2 |
3 | module.exports = { ...nxPreset };
4 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | };
4 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/register';
2 | export { ADDON_ID } from './lib/shared';
3 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/blocks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './iframe';
2 | export * from './iframe-container';
3 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | const { getJestProjects } = require('@nrwl/jest');
2 |
3 | module.exports = { projects: getJestProjects() };
4 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimdrury/geometricpanda/HEAD/apps/geometricpanda/src/favicon.ico
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/layouts/index.ts:
--------------------------------------------------------------------------------
1 | export * from './embedded-iframe-layout';
2 | export * from './generic-layout';
3 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/media/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimdrury/geometricpanda/HEAD/libs/storybook-addon-badges/media/icon.png
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/types';
2 | export * from './lib/shared';
3 | export * from './lib/register';
4 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/media/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimdrury/geometricpanda/HEAD/libs/storybook-addon-iframe/media/icon.png
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/icons/index.ts:
--------------------------------------------------------------------------------
1 | export * from './error';
2 | export * from './not-found';
3 | export * from './speed';
4 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/media/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimdrury/geometricpanda/HEAD/libs/storybook-addon-badges/media/screenshot.png
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/media/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimdrury/geometricpanda/HEAD/libs/storybook-addon-iframe/media/screenshot.png
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/preset.js:
--------------------------------------------------------------------------------
1 | function managerEntries(entry = []) {
2 | return [...entry, require.resolve('./storybook-addon-badges.esm.js')];
3 | }
4 |
5 | module.exports = { managerEntries };
6 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/preset.js:
--------------------------------------------------------------------------------
1 | function managerEntries(entry = []) {
2 | return [...entry, require.resolve('./storybook-addon-iframe.esm.js')];
3 | }
4 |
5 | module.exports = { managerEntries };
6 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/blocks/iframe.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@storybook/theming'
2 |
3 | export const IFrame = styled.iframe`
4 | background-color: white;
5 | border: 0;
6 | height: 100%;
7 | width: 100%;
8 | `;
9 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@nrwl/react/babel"],
3 | "plugins": [
4 | [
5 | "styled-components",
6 | {
7 | "pure": true,
8 | "ssr": true
9 | }
10 | ]
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/.storybook/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "exclude": [
4 | "../**/*.spec.js",
5 | "../**/*.spec.ts",
6 | "../**/*.spec.tsx",
7 | "../**/*.spec.jsx"
8 | ],
9 | "include": ["../**/*"]
10 | }
11 |
--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stories: [],
3 | addons: [
4 | '@storybook/addon-essentials',
5 | '@storybook/addon-docs',
6 | '@geometricpanda/storybook-addon-badges',
7 | '@geometricpanda/storybook-addon-iframe',
8 | ],
9 | };
10 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
3 | *
4 | * See: https://github.com/zloirock/core-js#babel
5 | */
6 | import 'core-js/stable';
7 | import 'regenerator-runtime/runtime';
8 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@nrwl/react/babel"],
3 | "plugins": [
4 | [
5 | "styled-components",
6 | {
7 | "pure": true,
8 | "ssr": true,
9 | "displayName": false
10 | }
11 | ]
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@nrwl/react/babel"],
3 | "plugins": [
4 | [
5 | "styled-components",
6 | {
7 | "pure": true,
8 | "ssr": true,
9 | "displayName": false
10 | }
11 | ]
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // When building for production, this file is replaced with `environment.prod.ts`.
3 |
4 | export const environment = {
5 | production: false,
6 | };
7 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import App from './app/app';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
--------------------------------------------------------------------------------
/tools/tsconfig.tools.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "../dist/out-tsc/tools",
5 | "rootDir": ".",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "types": ["node"]
9 | },
10 | "include": ["**/*.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/apps/geometricpanda/babel-jest.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@babel/preset-env",
5 | {
6 | "targets": {
7 | "node": "current"
8 | }
9 | }
10 | ],
11 | "@babel/preset-typescript",
12 | "@babel/preset-react"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/babel-jest.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@babel/preset-env",
5 | {
6 | "targets": {
7 | "node": "current"
8 | }
9 | }
10 | ],
11 | "@babel/preset-typescript",
12 | "@babel/preset-react"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/babel-jest.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@babel/preset-env",
5 | {
6 | "targets": {
7 | "node": "current"
8 | }
9 | }
10 | ],
11 | "@babel/preset-typescript",
12 | "@babel/preset-react"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/blocks/__snapshots__/badge.spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Badge should render a styled badge from config 1`] = `
4 |
7 |
10 | badge
11 |
12 |
13 | `;
14 |
--------------------------------------------------------------------------------
/.github/workflows/inclusive-language.yml:
--------------------------------------------------------------------------------
1 | name: Check Inclusive Language
2 | on: [issues, pull_request]
3 | jobs:
4 | check-language:
5 | runs-on: ubuntu-latest
6 | steps:
7 | - name: check-language
8 | uses: benhayehudi/inclusive-language-github-action@master
9 | env:
10 | GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
11 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.storybook/main.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-var-requires
2 | const rootMain = require('../../../.storybook/main');
3 |
4 | // Use the following syntax to add addons!
5 | // rootMain.addons.push('');
6 | rootMain.stories.push(...['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'])
7 |
8 | module.exports = rootMain;
9 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/blocks/__snapshots__/iframe.spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`iFrame should snapshot 1`] = `
4 | .c0 {
5 | background-color: white;
6 | border: 0;
7 | height: 100%;
8 | width: 100%;
9 | }
10 |
11 |
15 | `;
16 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node"]
7 | },
8 | "include": [
9 | "**/*.spec.ts",
10 | "**/*.spec.tsx",
11 | "**/*.spec.js",
12 | "**/*.spec.jsx",
13 | "**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node"]
7 | },
8 | "include": [
9 | "**/*.spec.ts",
10 | "**/*.spec.tsx",
11 | "**/*.spec.js",
12 | "**/*.spec.jsx",
13 | "**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/shared.ts:
--------------------------------------------------------------------------------
1 | export const ADDON_ID = '@geometricpanda/storybook-addon-iframe';
2 | export const ADDON_TITLE = 'External Content';
3 | export const PARAM_KEY = `iframe`;
4 |
5 |
6 | export interface AddonParameters {
7 | timeout: number;
8 | url: string;
9 | }
10 |
11 | export const DEFAULT_PARAMETERS: AddonParameters = {
12 | timeout: 10000,
13 | url: ''
14 | };
15 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Supported Versions
4 |
5 | | Version | Supported |
6 | | ------- | ------------------ |
7 | | 0.0.x | :white_check_mark: |
8 |
9 | ## Reporting a Vulnerability
10 |
11 | To report a vulnerability, please open a [Security Issue Disclosure](https://github.com/geometricpanda/geometricpanda/issues/new?assignees=&labels=&template=4-security-issue-disclosure.md).
12 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Geometricpanda
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/register.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { addons, types } from '@storybook/addons';
3 | import { ADDON_ID, ADDON_TITLE } from './shared';
4 | import { Manager } from './manager';
5 |
6 | addons.register(ADDON_ID, () => {
7 | addons.add(ADDON_ID, {
8 | title: ADDON_TITLE,
9 | type: types.TOOL,
10 | match: () => true,
11 | render: Manager
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/app/star.svg:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/blocks/iframe-container.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@storybook/theming'
2 |
3 | export interface IFrameContainerProps {
4 | loaded?: boolean
5 | }
6 |
7 | export const IFrameContainer = styled.div`
8 | display: flex;
9 | height: 100%;
10 | transition: opacity 300ms;
11 | transform: translate(0);
12 | opacity: ${({ loaded }) => loaded ? '1' : '0'};
13 | `;
14 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "jsx": "react-jsx",
5 | "allowJs": true,
6 | "esModuleInterop": true,
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "files": [],
10 | "include": [],
11 | "references": [
12 | {
13 | "path": "./tsconfig.lib.json"
14 | },
15 | {
16 | "path": "./tsconfig.spec.json"
17 | }
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": ["node"]
6 | },
7 | "files": [
8 | "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
9 | "../../node_modules/@nrwl/react/typings/image.d.ts"
10 | ],
11 | "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
12 | "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
13 | }
14 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "jsx": "react-jsx",
5 | "allowJs": true,
6 | "esModuleInterop": true,
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "files": [],
10 | "include": [],
11 | "references": [
12 | {
13 | "path": "./tsconfig.lib.json"
14 | },
15 | {
16 | "path": "./tsconfig.spec.json"
17 | }
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": ["node"]
6 | },
7 | "files": [
8 | "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
9 | "../../node_modules/@nrwl/react/typings/image.d.ts"
10 | ],
11 | "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
12 | "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
13 | }
14 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/4-security-issue-disclosure.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: ⚠️ Security issue disclosure
3 | about: Report a security issue in `@geometricpanda`
4 | ---
5 |
6 | # 🐞 bug report
7 |
8 | ## Affected Package
9 |
10 | The issue is caused by package @gemetricpanda/....
11 |
12 | ## Anything else relevant?
13 |
14 |
--------------------------------------------------------------------------------
/apps/geometricpanda/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: 'geometricpanda',
3 | preset: '../../jest.preset.js',
4 | transform: {
5 | '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
6 | '^.+\\.[tj]sx?$': [
7 | 'babel-jest',
8 | { cwd: __dirname, configFile: './babel-jest.config.json' },
9 | ],
10 | },
11 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
12 | coverageDirectory: '../../coverage/apps/geometricpanda',
13 | };
14 |
--------------------------------------------------------------------------------
/apps/geometricpanda/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "jsx": "react-jsx",
5 | "allowJs": true,
6 | "esModuleInterop": true,
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "files": [],
10 | "include": [],
11 | "references": [
12 | {
13 | "path": "./tsconfig.app.json"
14 | },
15 | {
16 | "path": "./tsconfig.spec.json"
17 | },
18 | {
19 | "path": "./.storybook/tsconfig.json"
20 | }
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/apps/geometricpanda/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node"]
7 | },
8 | "include": [
9 | "**/*.spec.ts",
10 | "**/*.spec.tsx",
11 | "**/*.spec.js",
12 | "**/*.spec.jsx",
13 | "**/*.d.ts"
14 | ],
15 | "files": [
16 | "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
17 | "../../node_modules/@nrwl/react/typings/image.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Export a function. Accept the base config as the only param.
3 | * @param {Object} options
4 | * @param {Required} options.config
5 | * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
6 | */
7 | module.exports = async ({ config, mode }) => {
8 | // Make whatever fine-grained changes you need
9 |
10 | // Return the altered config
11 | return config;
12 | };
13 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/register.tsx:
--------------------------------------------------------------------------------
1 | import addons, { types } from '@storybook/addons';
2 | import React from 'react';
3 | import { ADDON_ID, ADDON_TITLE, PARAM_KEY } from './shared';
4 | import { Manager } from './manager';
5 |
6 | addons.register(ADDON_ID, () => {
7 | addons.add(ADDON_ID, {
8 | paramKey: PARAM_KEY,
9 | type: types.TAB,
10 | title: ADDON_TITLE,
11 | route: ({ storyId }) => `/iframe/${storyId}`,
12 | match: ({ viewMode }) => viewMode === 'iframe',
13 | render: Manager,
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/app/app.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 |
4 | import App from './app';
5 |
6 | describe('App', () => {
7 | it('should render successfully', () => {
8 | const { baseElement } = render( );
9 |
10 | expect(baseElement).toBeTruthy();
11 | });
12 |
13 | it('should have a greeting as the title', () => {
14 | const { getByText } = render( );
15 |
16 | expect(getByText('Welcome to geometricpanda!')).toBeTruthy();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | /.vscode
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 | *.sublime-workspace
20 |
21 | # misc
22 | /.sass-cache
23 | /connect.lock
24 | /coverage
25 | /libpeerconnection.log
26 | npm-debug.log
27 | yarn-error.log
28 | testem.log
29 | /typings
30 |
31 | # System Files
32 | .DS_Store
33 | Thumbs.db
34 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*", ".storybook/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7 | "parserOptions": {
8 | "project": ["apps/geometricpanda/tsconfig.*?.json"]
9 | },
10 | "rules": {}
11 | },
12 | {
13 | "files": ["*.ts", "*.tsx"],
14 | "rules": {}
15 | },
16 | {
17 | "files": ["*.js", "*.jsx"],
18 | "rules": {}
19 | }
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7 | "parserOptions": {
8 | "project": ["libs/storybook-addon-badges/tsconfig.*?.json"]
9 | },
10 | "rules": {}
11 | },
12 | {
13 | "files": ["*.ts", "*.tsx"],
14 | "rules": {}
15 | },
16 | {
17 | "files": ["*.js", "*.jsx"],
18 | "rules": {}
19 | }
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7 | "parserOptions": {
8 | "project": ["libs/storybook-addon-iframe/tsconfig.*?.json"]
9 | },
10 | "rules": {}
11 | },
12 | {
13 | "files": ["*.ts", "*.tsx"],
14 | "rules": {}
15 | },
16 | {
17 | "files": ["*.js", "*.jsx"],
18 | "rules": {}
19 | }
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.storybook/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "emitDecoratorMetadata": true,
5 | "outDir": ""
6 | },
7 | "exclude": [
8 | "../**/*.spec.ts",
9 | "../**/*.spec.js",
10 | "../**/*.spec.tsx",
11 | "../**/*.spec.jsx"
12 | ],
13 | "include": ["../src/**/*", "./*.js"],
14 | "files": [
15 | "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
16 | "../../../node_modules/@nrwl/react/typings/image.d.ts",
17 | "../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by:
2 | # 1. autoprefixer to adjust CSS to support the below specified browsers
3 | # 2. babel preset-env to adjust included polyfills
4 | #
5 | # For additional information regarding the format and rule options, please see:
6 | # https://github.com/browserslist/browserslist#queries
7 | #
8 | # If you need to support different browsers in production, you may tweak the list below.
9 |
10 | last 1 Chrome version
11 | last 1 Firefox version
12 | last 2 Edge major versions
13 | last 2 Safari major version
14 | last 2 iOS major versions
15 | Firefox ESR
16 | not IE 9-11 # For IE 9-11 support, remove 'not'.
--------------------------------------------------------------------------------
/apps/geometricpanda/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": [
6 | "node"
7 | ]
8 | },
9 | "files": [
10 | "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
11 | "../../node_modules/@nrwl/react/typings/image.d.ts"
12 | ],
13 | "exclude": [
14 | "**/*.spec.ts",
15 | "**/*.spec.tsx",
16 | "**/*.stories.ts",
17 | "**/*.stories.js",
18 | "**/*.stories.jsx",
19 | "**/*.stories.tsx"
20 | ],
21 | "include": [
22 | "**/*.js",
23 | "**/*.jsx",
24 | "**/*.ts",
25 | "**/*.tsx"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: 'storybook-addon-badges',
3 | preset: '../../jest.preset.js',
4 | transform: {
5 | '^.+\\.[tj]sx?$': [
6 | 'babel-jest',
7 | { cwd: __dirname, configFile: './babel-jest.config.json' }
8 | ]
9 | },
10 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
11 | coverageDirectory: '../../coverage/libs/storybook-addon-badges',
12 | coverageReporters: [
13 | 'json',
14 | 'lcov',
15 | 'text',
16 | 'clover'
17 | ],
18 | coverageThreshold: {
19 | global: {
20 | branches: 80,
21 | functions: 80,
22 | lines: 80,
23 | statements: -10
24 | }
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: 'storybook-addon-iframe',
3 | preset: '../../jest.preset.js',
4 | transform: {
5 | '^.+\\.[tj]sx?$': [
6 | 'babel-jest',
7 | { cwd: __dirname, configFile: './babel-jest.config.json' }
8 | ]
9 | },
10 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
11 | coverageDirectory: '../../coverage/libs/storybook-addon-iframe',
12 | coverageReporters: [
13 | 'json',
14 | 'lcov',
15 | 'text',
16 | 'clover'
17 | ],
18 | coverageThreshold: {
19 | global: {
20 | branches: 80,
21 | functions: 80,
22 | lines: 80,
23 | statements: -10
24 | }
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/2-feature-request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: 🚀 Feature request
3 | about: Suggest a feature for `@geometricpanda`
4 | ---
5 |
6 | # 🚀 feature request
7 |
8 | ### Relevant Package
9 |
10 | The issue is caused by package @gemetricpanda/....
11 |
12 |
13 | ### Description
14 | A clear and concise description of the problem or missing capability...
15 |
16 |
17 | ### Describe the solution you'd like
18 | If you have a solution in mind, please describe it.
19 |
20 |
21 | ### Describe alternatives you've considered
22 | Have you considered any alternative solutions or workarounds?
23 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/layouts/__snapshots__/generic-layout.spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`GenericLayout should render and icon and text 1`] = `
4 |
7 |
10 |
14 |
15 |
18 |
19 | Lorem Ipsum
20 |
21 |
22 |
23 | `;
24 |
25 | exports[`GenericLayout should render text 1`] = `
26 |
29 |
32 |
33 | Lorem Ipsum
34 |
35 |
36 |
37 | `;
38 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import { addParameters } from '@storybook/react';
2 | import { BADGE, defaultBadgesConfig } from '@geometricpanda/storybook-addon-badges';
3 |
4 | addParameters({
5 | badgesConfig: {
6 | [BADGE.BETA]: {
7 | ...defaultBadgesConfig[BADGE.BETA],
8 | tooltip: {
9 | title: 'This is Beta',
10 | desc: 'Be ready to receive updates frequently and leave a feedback',
11 | links: [
12 | {title: 'Read more', href: 'http://path/to/your/docs'},
13 | {title: 'Leave feedback', onClick: () => {alert('thanks for the feedback')}}]
14 | }
15 | },
16 | [BADGE.DEPRECATED]: {
17 | ...defaultBadgesConfig[BADGE.DEPRECATED],
18 | tooltip: 'This component is deprecated, please avoid using it.'
19 | }
20 | }
21 | });
22 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "rootDir": ".",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "importHelpers": true,
11 | "target": "es2015",
12 | "module": "esnext",
13 | "lib": ["es2017", "dom"],
14 | "skipLibCheck": true,
15 | "skipDefaultLibCheck": true,
16 | "baseUrl": ".",
17 | "paths": {
18 | "@geometricpanda/storybook-addon-badges": [
19 | "libs/storybook-addon-badges/src/index.ts"
20 | ],
21 | "@geometricpanda/storybook-addon-iframe": [
22 | "libs/storybook-addon-iframe/src/index.ts"
23 | ]
24 | }
25 | },
26 | "exclude": ["node_modules", "tmp"]
27 | }
28 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "ignorePatterns": ["**/*"],
4 | "plugins": ["@nrwl/nx"],
5 | "overrides": [
6 | {
7 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
8 | "rules": {
9 | "@nrwl/nx/enforce-module-boundaries": [
10 | "error",
11 | {
12 | "enforceBuildableLibDependency": true,
13 | "allow": [],
14 | "depConstraints": [
15 | {
16 | "sourceTag": "*",
17 | "onlyDependOnLibsWithTags": ["*"]
18 | }
19 | ]
20 | }
21 | ]
22 | }
23 | },
24 | {
25 | "files": ["*.ts", "*.tsx"],
26 | "extends": ["plugin:@nrwl/nx/typescript"],
27 | "rules": {}
28 | },
29 | {
30 | "files": ["*.js", "*.jsx"],
31 | "extends": ["plugin:@nrwl/nx/javascript"],
32 | "rules": {}
33 | }
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/manager.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Combo, Consumer } from '@storybook/api';
3 |
4 | import type { BadgesConfig } from './types';
5 | import { defaultBadgesConfig, PARAM_BADGES_CONFIG_KEY, PARAM_BADGES_KEY } from './shared';
6 | import { Badges } from './blocks/badges';
7 |
8 |
9 | export const Manager = () => (
10 |
11 | {({ api, state }: Combo) => {
12 | const story = api.getData(state.storyId, state.refId);
13 |
14 | const customBadgesConfig = api.getCurrentParameter(PARAM_BADGES_CONFIG_KEY) || {};
15 |
16 | const badgesConfig = {
17 | ...defaultBadgesConfig,
18 | ...customBadgesConfig,
19 | };
20 |
21 | const badges = api.getCurrentParameter(PARAM_BADGES_KEY) || [];
22 |
23 | return story && badges.length
24 | ?
26 | : null;
27 | }}
28 |
29 | );
30 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/blocks/withBadgeTooltip.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, ComponentType } from 'react';
2 | import { WithTooltip, TooltipMessage } from '@storybook/components';
3 |
4 | import type { BadgeProps } from '../types';
5 | import { getTooltip } from '../helpers/helpers';
6 |
7 | export const WithBadgeTooltip =
8 | (Component: ComponentType): FC =>
9 | ({ badge, config, ...rest }) => {
10 | const tooltipData = getTooltip(badge, config);
11 |
12 | let tooltipMessageProps: typeof tooltipData;
13 | if (typeof tooltipData === 'string') {
14 | tooltipMessageProps = { desc: tooltipData };
15 | } else {
16 | tooltipMessageProps = tooltipData;
17 | }
18 |
19 | return tooltipData ? (
20 | }>
21 |
22 |
23 | ) : (
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/layouts/generic-layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import styled from 'styled-components';
3 |
4 | const GenericIconLayoutWrapper = styled.div`
5 | width: 100px;
6 | margin-bottom: 1rem;
7 | `;
8 |
9 | const GenericLayoutText = styled.h1`
10 | color: #999;
11 | font-size: 1rem;
12 | font-weight: bold;
13 | `;
14 |
15 | const GenericLayoutContainer = styled.div`
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | flex-direction: column;
20 | height: 100%;
21 | width: 100%;
22 | `;
23 |
24 | export interface GenericLayoutProps {
25 | icon?: ReactNode;
26 | }
27 |
28 | export const GenericLayout: React.FC = ({ children, icon }) => (
29 |
30 | {icon && (
31 |
32 | {icon}
33 |
34 | )}
35 |
36 | {children}
37 |
38 |
39 | );
40 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/LICENCE.md:
--------------------------------------------------------------------------------
1 | Copyright 2021 James Drury
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/manager.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Combo, Consumer } from '@storybook/api';
3 | import { AddonParameters, DEFAULT_PARAMETERS, PARAM_KEY } from './shared';
4 | import { EmbeddedIframeLayout } from './layouts';
5 |
6 | interface ManagerProps {
7 | active: boolean;
8 | }
9 |
10 | export const Manager: React.FC = ({ active }) => {
11 | return active
12 | ? (
13 |
14 | {({ api, state }: Combo) => {
15 | const story = api.getData(state.storyId, state.refId);
16 | const parameters = {
17 | ...DEFAULT_PARAMETERS,
18 | ...api.getCurrentParameter(PARAM_KEY)
19 | };
20 |
21 | return story && parameters?.url
22 | ? (
23 |
27 | )
28 | : null;
29 | }}
30 |
31 | )
32 | : null;
33 | };
34 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from 'react';
2 | import { TooltipMessage } from '@storybook/components';
3 |
4 | export type TooltipConfig =
5 | | Omit, 'children'>
6 | | string;
7 |
8 | export type BadgeConfig = {
9 | title?: string;
10 | // @deprecated: Color has been deprecated, please use the `styles` property.
11 | color?: string;
12 | // @deprecated: Contrast has been deprecated, please use the `styles` property.
13 | contrast?: string;
14 | styles?: {
15 | backgroundColor?: string;
16 | borderColor?: string;
17 | borderRadius?: string;
18 | borderStyle?: string;
19 | borderWidth?: string;
20 | color?: string;
21 | fontSize?: string;
22 | fontFamily?: string;
23 | fontWeight?: string;
24 | lineHeight?: string | number;
25 | textTransform?: string;
26 | paddingInline?: string;
27 | paddingBlock?: string;
28 | };
29 | tooltip?: TooltipConfig;
30 | };
31 |
32 | export interface BadgesConfig {
33 | [id: string]: BadgeConfig;
34 | }
35 |
36 | export interface BadgeProps {
37 | badge: string;
38 | config: BadgeConfig;
39 | }
40 |
--------------------------------------------------------------------------------
/nx.json:
--------------------------------------------------------------------------------
1 | {
2 | "npmScope": "geometricpanda",
3 | "affected": {
4 | "defaultBase": "main"
5 | },
6 | "implicitDependencies": {
7 | "workspace.json": "*",
8 | "package.json": {
9 | "dependencies": "*",
10 | "devDependencies": "*"
11 | },
12 | "tsconfig.base.json": "*",
13 | "tslint.json": "*",
14 | ".eslintrc.json": "*",
15 | "nx.json": "*"
16 | },
17 | "tasksRunnerOptions": {
18 | "default": {
19 | "runner": "@nrwl/workspace/tasks-runners/default",
20 | "options": {
21 | "cacheableOperations": [
22 | "build",
23 | "lint",
24 | "test",
25 | "e2e",
26 | "build-storybook"
27 | ]
28 | }
29 | }
30 | },
31 | "projects": {
32 | "geometricpanda": {
33 | "tags": [],
34 | "implicitDependencies": [
35 | "storybook-addon-badges",
36 | "storybook-addon-iframe"
37 | ]
38 | },
39 | "storybook-addon-badges": {
40 | "tags": []
41 | },
42 | "storybook-addon-iframe": {
43 | "tags": []
44 | }
45 | },
46 | "targetDependencies": {
47 | "build": [
48 | {
49 | "target": "build",
50 | "projects": "dependencies"
51 | }
52 | ]
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/3-docs-bug.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: 🐞 Docs Bug report
3 | about: Report a documentation bug in `@geometricpanda`
4 | ---
5 |
6 | # 📚 Docs bug report
7 |
8 | ### Description
9 |
10 | A clear and concise description of the problem...
11 |
12 |
13 | ## 🔬 Minimal Reproduction
14 |
15 | ### What's the affected URL?**
16 | https://www.xyz.com/...
17 |
18 | ### Reproduction Steps**
19 |
20 |
21 |
22 | ### Expected vs Actual Behavior**
23 |
24 |
25 |
26 |
27 | ## 📷Screenshot
28 |
29 |
30 |
31 |
32 | ## 🔥 Exception or Error
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | ## 🌍 Your Environment
41 |
42 | ### Browser info
43 |
44 |
45 | ### Anything else relevant?
46 |
47 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/helpers/helpers.ts:
--------------------------------------------------------------------------------
1 | import { BadgeConfig, TooltipConfig } from '../types';
2 | import { defaultBadgeConfig } from '../shared';
3 |
4 | export const getBadgeConfig = (
5 | badge: string,
6 | config: BadgeConfig
7 | ): BadgeConfig => ({
8 | ...defaultBadgeConfig,
9 | title: badge,
10 | ...config,
11 | });
12 |
13 | export const getColor = (badge: string, config: BadgeConfig): string =>
14 | getBadgeConfig(badge, config).color;
15 |
16 | export const getContrastColor = (badge: string, config: BadgeConfig): string =>
17 | getBadgeConfig(badge, config).contrast;
18 |
19 | export const getTitle = (badge: string, config: BadgeConfig): string =>
20 | getBadgeConfig(badge, config).title;
21 |
22 | export const getTooltip = (badge: string, config: BadgeConfig): TooltipConfig =>
23 | getBadgeConfig(badge, config).tooltip;
24 |
25 | export const getBadgeCustomProperty = (name: string, suffix: string) => {
26 | const normalisedName = name.replace(/[^a-z0-9]/g, (str) => {
27 | const char = str.charCodeAt(0);
28 |
29 | if (char == 32) {
30 | return '-';
31 | }
32 |
33 | if (char >= 65 && char <= 90) {
34 | return '_' + str.toLowerCase();
35 | }
36 |
37 | return '__' + ('000' + char.toString(16)).slice(-4);
38 | });
39 |
40 | return `--badge-${normalisedName}-${suffix}`;
41 | };
42 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@geometricpanda/storybook-addon-iframe",
3 | "author": "geometricpanda",
4 | "description": "A Storybook addon which allows you to add iFrames to Stories",
5 | "version": "0.2.2",
6 | "license": "MIT",
7 | "keywords": [
8 | "storybook-addons",
9 | "storybook",
10 | "addon",
11 | "layout",
12 | "appearance",
13 | "code"
14 | ],
15 | "storybook": {
16 | "displayName": "iFrame",
17 | "unsupportedFrameworks": [],
18 | "supportedFrameworks": [
19 | "React",
20 | "Angular",
21 | "Vue"
22 | ],
23 | "icon": "https://raw.githubusercontent.com/geometricpanda/geometricpanda/main/libs/storybook-addon-iframe/media/icon.png"
24 | },
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/geometricpanda/geometricpanda/tree/main/libs/storybook-addon-iframe"
28 | },
29 | "bugs": {
30 | "url": "https://github.com/geometricpanda/geometricpanda/issues"
31 | },
32 | "homepage": "https://geometricpanda-storybook.netlify.app/?path=/story/addon-iframe-docs--page",
33 | "dependencies": {
34 | "react": "^17.0.2",
35 | "react-dom": "^17.0.2",
36 | "react-is": "^17.0.2",
37 | "@storybook/addons": "^6.2.9",
38 | "@storybook/api": "^6.2.9",
39 | "@storybook/components": "^6.2.9",
40 | "@storybook/theming": "^6.2.9",
41 | "styled-components": "5.2.1"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@geometricpanda/storybook-addon-badges",
3 | "author": "geometricpanda",
4 | "description": "A Storybook addon which allows you to add badges to you stories",
5 | "version": "0.2.2",
6 | "license": "MIT",
7 | "keywords": [
8 | "storybook-addons",
9 | "storybook",
10 | "addon",
11 | "layout",
12 | "organize",
13 | "badges"
14 | ],
15 | "storybook": {
16 | "displayName": "Badges",
17 | "unsupportedFrameworks": [],
18 | "supportedFrameworks": [
19 | "React",
20 | "Angular",
21 | "Vue"
22 | ],
23 | "icon": "https://raw.githubusercontent.com/geometricpanda/geometricpanda/main/libs/storybook-addon-badges/media/icon.png"
24 | },
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/geometricpanda/geometricpanda/tree/main/libs/storybook-addon-badges"
28 | },
29 | "bugs": {
30 | "url": "https://github.com/geometricpanda/geometricpanda/issues"
31 | },
32 | "homepage": "https://geometricpanda-storybook.netlify.app/?path=/story/addon-badges-docs--page",
33 | "dependencies": {
34 | "react": "^17.0.2",
35 | "react-dom": "^17.0.2",
36 | "react-is": "^17.0.2",
37 | "@storybook/addons": "^6.2.9",
38 | "@storybook/api": "^6.2.9",
39 | "@storybook/components": "^6.2.9",
40 | "@storybook/theming": "^6.2.9",
41 | "styled-components": "^5.2.1"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/1-bug-report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: 🐞 Bug report
3 | about: Report a bug in `@geometricpanda`
4 | ---
5 |
6 | # 🐞 bug report
7 |
8 | ### Affected Package
9 |
10 | The issue is caused by package @gemetricpanda/....
11 |
12 |
13 | ### Is this a regression?
14 |
15 |
16 | Yes, the previous version in which this bug was not present was: ....
17 |
18 |
19 | ### Description
20 |
21 | A clear and concise description of the problem...
22 |
23 |
24 | ## 🔬 Minimal Reproduction
25 |
30 | https://github.com/...
31 |
32 |
33 | ## 🔥 Exception or Error
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | ## 🌍 Your Environment
42 |
43 | **Storybook Version:**
44 |
45 |
46 |
47 |
48 |
49 | **@geometricpanda Version:**
50 |
51 |
52 |
53 |
54 |
55 | **Anything else relevant?**
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://geometricpanda-storybook.netlify.app)
2 |
3 | # Storybook Plugins
4 |
5 | | Plugin | Badge
6 | | --- | ---
7 | | `@geometricpanda/storybook-addon-badges` | [](https://www.npmjs.com/package/@geometricpanda/storybook-addon-badges)
8 | | `@geometricpanda/storybook-addon-iframe` | [](https://www.npmjs.com/package/@geometricpanda/storybook-addon-iframe)
9 |
10 |
11 | # Badges
12 | | Purpose | Badge
13 | | --- | ---
14 | | Build | [](https://app.circleci.com/pipelines/github/geometricpanda)
15 | | Inclusive Language | 
16 | | Code Coverage | [](https://codecov.io/gh/geometricpanda/geometricpanda)
17 | | Security Vulnerabilities | 
18 | | License Check | [](https://app.fossa.com/projects/custom%2B22786%2Fgithub.com%2Fgeometricpanda%2Fgeometricpanda?ref=badge_shield)
19 |
20 |
21 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/shared.ts:
--------------------------------------------------------------------------------
1 | import type { BadgesConfig, BadgeConfig } from './types';
2 |
3 | export const ADDON_ID = '@geometricpanda/storybook-addon-badges';
4 | export const ADDON_TITLE = 'Storybook Addon Badges';
5 |
6 | export const PARAM_BADGES_CONFIG_KEY = 'badgesConfig';
7 | export const PARAM_BADGES_KEY = 'badges';
8 |
9 | export enum BADGE {
10 | DEFAULT = 'default',
11 | BETA = 'beta',
12 | STABLE = 'stable',
13 | NEEDS_REVISION = 'needs-revision',
14 | OBSOLETE = 'obsolete',
15 | EXPERIMENTAL = 'experimental',
16 | DEPRECATED = 'deprecated',
17 | }
18 |
19 | export const defaultBadgesConfig: BadgesConfig = {
20 | [BADGE.DEFAULT]: {
21 | title: 'Badge',
22 | },
23 | [BADGE.BETA]: {
24 | title: 'Beta',
25 | styles: {
26 | backgroundColor: '#D6E0FF',
27 | borderColor: '#2952CC',
28 | color: '#2952CC',
29 | },
30 | },
31 | [BADGE.STABLE]: {
32 | title: 'Stable',
33 | styles: {
34 | backgroundColor: '#DCF2EA',
35 | borderColor: '#317159',
36 | color: '#317159',
37 | },
38 | },
39 | [BADGE.NEEDS_REVISION]: {
40 | title: 'Needs Revision',
41 | styles: {
42 | backgroundColor: '#FFEFD2',
43 | borderColor: '#66460D',
44 | color: '#66460D',
45 | },
46 | },
47 | [BADGE.OBSOLETE]: {
48 | title: 'Obsolete',
49 | styles: {
50 | backgroundColor: '#F9DADA',
51 | borderColor: '#7D2828',
52 | color: '#7D2828',
53 | },
54 | },
55 | [BADGE.EXPERIMENTAL]: {
56 | title: 'Experimental',
57 | styles: {
58 | backgroundColor: '#E7E4F9',
59 | borderColor: '#6E62B6',
60 | color: '#6E62B6',
61 | },
62 | },
63 | [BADGE.DEPRECATED]: {
64 | title: 'Deprecated',
65 | styles: {
66 | backgroundColor: '#F8E3DA',
67 | borderColor: '#85462B',
68 | color: '#85462B',
69 | },
70 | },
71 | };
72 |
73 | export const defaultBadgeConfig: BadgeConfig =
74 | defaultBadgesConfig[BADGE.DEFAULT];
75 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/blocks/badge.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import { styled } from '@storybook/theming';
3 | import { WithBadgeTooltip } from './withBadgeTooltip';
4 | import type { BadgeProps } from '../types';
5 | import { getBadgeCustomProperty, getTitle } from '../helpers/helpers';
6 |
7 | export const BadgeWrapper = styled.span(({ theme }) => ({
8 | display: 'flex',
9 | paddingInline: theme.layoutMargin / 2
10 | }));
11 |
12 | export const BadgeInner = styled.span>(
13 | ({ badge }) => ({
14 | borderColor: `var(${getBadgeCustomProperty(badge, 'border-color')})`,
15 | borderRadius: `var(${getBadgeCustomProperty(badge, 'border-radius')})`,
16 | borderStyle: `var(${getBadgeCustomProperty(badge, 'border-style')})`,
17 | borderWidth: `var(${getBadgeCustomProperty(badge, 'border-width')})`,
18 | color: `var(${getBadgeCustomProperty(badge, 'color')})`,
19 | backgroundColor: `var(${getBadgeCustomProperty(badge, 'background-color')})`,
20 | fontSize: `var(${getBadgeCustomProperty(badge, 'font-size')})`,
21 | fontFamily: `var(${getBadgeCustomProperty(badge, 'font-family')})`,
22 | // Typecasting as 'bold' due to custom properties not working with `styled`.
23 | fontWeight: `var(${getBadgeCustomProperty(badge, 'font-weight')})` as 'bold',
24 | lineHeight: `var(${getBadgeCustomProperty(badge, 'line-height')})`,
25 | // Typecasting as 'uppercase' due to custom properties not working with `styled`.
26 | textTransform: `var(${getBadgeCustomProperty(badge, 'text-transform')})` as 'uppercase',
27 | paddingInline: `var(${getBadgeCustomProperty(badge, 'padding-inline')})`,
28 | paddingBlock: `var(${getBadgeCustomProperty(badge, 'padding-block')})`,
29 | display: 'block'
30 | })
31 | );
32 |
33 | const BadgeInnerWithTooltip = WithBadgeTooltip(BadgeInner);
34 |
35 | export const Badge: FC = ({ badge, config }) => (
36 |
37 |
38 | {getTitle(badge, config)}
39 |
40 |
41 | );
42 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/layouts/embedded-iframe-layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
2 | import { IFrame } from '../blocks/iframe';
3 | import { IFrameContainer } from '../blocks/iframe-container';
4 | import { GenericLayout } from './generic-layout';
5 | import { ErrorIcon, SpeedIcon } from '../icons';
6 |
7 | export interface EmbeddedIframeProps {
8 | url: string;
9 | timeout: number;
10 | }
11 |
12 | export enum LOADING_STATE {
13 | INITIAL = 'initial',
14 | LOADING = 'loading',
15 | LOADED = 'loaded',
16 | TIMEOUT = 'timeout',
17 | }
18 |
19 | export const EmbeddedIframeLayout: React.FC = ({ url, timeout }) => {
20 |
21 | const [state, setState] = useState(LOADING_STATE.INITIAL);
22 | const errorTimeout = useRef(null);
23 |
24 | const onUnmount = useCallback(() => {
25 | setState(LOADING_STATE.INITIAL);
26 | clearTimeout(errorTimeout.current);
27 | }, [setState, errorTimeout]);
28 |
29 | const onLoad = () => {
30 | setState(LOADING_STATE.LOADED);
31 | clearTimeout(errorTimeout.current);
32 | };
33 |
34 | const onTimeout = () => {
35 | setState(LOADING_STATE.TIMEOUT);
36 | };
37 |
38 | useLayoutEffect(() => {
39 | setState(LOADING_STATE.LOADING);
40 | errorTimeout.current = setTimeout(onTimeout, timeout);
41 | return onUnmount;
42 | }, [onUnmount, setState, errorTimeout, timeout]);
43 |
44 | switch (state) {
45 | case LOADING_STATE.LOADING:
46 | case LOADING_STATE.LOADED:
47 | return (
48 | <>
49 | {state === LOADING_STATE.LOADING && (
50 | }>
51 | Loading
52 | )
53 | }
54 |
55 |
61 |
62 | >
63 | );
64 |
65 | case LOADING_STATE.TIMEOUT:
66 | return (
67 | }>
68 | Sorry, this tab didn't load in time
69 |
70 | );
71 |
72 | case LOADING_STATE.INITIAL:
73 | default:
74 | return null;
75 | }
76 |
77 | };
78 |
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 |
14 | on:
15 | push:
16 | branches: [ main ]
17 | pull_request:
18 | # The branches below must be a subset of the branches above
19 | branches: [ main ]
20 | schedule:
21 | - cron: '36 16 * * 3'
22 |
23 | jobs:
24 | analyze:
25 | name: Analyze
26 | runs-on: ubuntu-latest
27 |
28 | strategy:
29 | fail-fast: false
30 | matrix:
31 | language: [ 'javascript' ]
32 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
33 | # Learn more:
34 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
35 |
36 | steps:
37 | - name: Checkout repository
38 | uses: actions/checkout@v2
39 |
40 | # Initializes the CodeQL tools for scanning.
41 | - name: Initialize CodeQL
42 | uses: github/codeql-action/init@v1
43 | with:
44 | languages: ${{ matrix.language }}
45 | # If you wish to specify custom queries, you can do so here or in a config file.
46 | # By default, queries listed here will override any specified in a config file.
47 | # Prefix the list here with "+" to use these queries and those in the config file.
48 | # queries: ./path/to/local/query, your-org/your-repo/queries@main
49 |
50 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
51 | # If this step fails, then you should remove it and run the build manually (see below)
52 | - name: Autobuild
53 | uses: github/codeql-action/autobuild@v1
54 |
55 | # ℹ️ Command-line programs to run using the OS shell.
56 | # 📚 https://git.io/JvXDl
57 |
58 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
59 | # and modify them (or add more) to build your code if your project
60 | # uses a compiled language
61 |
62 | #- run: |
63 | # make bootstrap
64 | # make release
65 |
66 | - name: Perform CodeQL Analysis
67 | uses: github/codeql-action/analyze@v1
68 |
--------------------------------------------------------------------------------
/apps/geometricpanda/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-var-requires
2 | const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
3 | // eslint-disable-next-line @typescript-eslint/no-var-requires
4 | const rootWebpackConfig = require('../../../.storybook/webpack.config');
5 | /**
6 | * Export a function. Accept the base config as the only param.
7 | *
8 | * @param {Parameters[0]} options
9 | */
10 | module.exports = async ({ config, mode }) => {
11 | config = await rootWebpackConfig({ config, mode });
12 |
13 | const tsPaths = new TsconfigPathsPlugin({
14 | configFile: './tsconfig.base.json',
15 | });
16 |
17 | config.resolve.plugins
18 | ? config.resolve.plugins.push(tsPaths)
19 | : (config.resolve.plugins = [tsPaths])
20 |
21 |
22 | // Found this here: https://github.com/nrwl/nx/issues/2859
23 | // And copied the part of the solution that made it work
24 |
25 | const svgRuleIndex = config.module.rules.findIndex(rule => {
26 | const { test } = rule;
27 |
28 | return test.toString().startsWith('/\\.(svg|ico');
29 | });
30 | config.module.rules[svgRuleIndex].test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
31 |
32 | config.module.rules.push(
33 | {
34 | test: /\.(png|jpe?g|gif|webp)$/,
35 | loader: require.resolve('url-loader'),
36 | options: {
37 | limit: 10000, // 10kB
38 | name: '[name].[hash:7].[ext]',
39 | },
40 | },
41 | {
42 | test: /\.svg$/,
43 | oneOf: [
44 | // If coming from JS/TS file, then transform into React component using SVGR.
45 | {
46 | issuer: {
47 | test: /\.[jt]sx?$/,
48 | },
49 | use: [
50 | '@svgr/webpack?-svgo,+titleProp,+ref![path]',
51 | {
52 | loader: require.resolve('url-loader'),
53 | options: {
54 | limit: 10000, // 10kB
55 | name: '[name].[hash:7].[ext]',
56 | esModule: false,
57 | },
58 | },
59 | ],
60 | },
61 | // Fallback to plain URL loader.
62 | {
63 | use: [
64 | {
65 | loader: require.resolve('url-loader'),
66 | options: {
67 | limit: 10000, // 10kB
68 | name: '[name].[hash:7].[ext]',
69 | },
70 | },
71 | ],
72 | },
73 | ],
74 | }
75 | );
76 |
77 |
78 | return config;
79 | };
80 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/blocks/badges.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import { Separator, Spaced } from '@storybook/components';
3 | import { styled } from '@storybook/theming';
4 |
5 | import type { BadgeConfig, BadgesConfig } from '../types';
6 |
7 | import { defaultBadgesConfig } from '../shared';
8 | import { Badge } from './badge';
9 | import { getBadgeCustomProperty } from '../helpers/helpers';
10 |
11 | interface BadgesProps {
12 | badges: Array;
13 | badgesConfig?: BadgesConfig;
14 | }
15 |
16 | const getCustomProperties = (config: BadgesConfig) =>
17 | Object.entries(config).reduce(
18 | (acc, [name, { color, contrast, styles }]) => ({
19 | ...acc,
20 | [getBadgeCustomProperty(name, 'background-color')]:
21 | styles?.backgroundColor || contrast || '#EDEFF5',
22 | [getBadgeCustomProperty(name, 'border-color')]:
23 | styles?.borderColor || color || '#474D66',
24 | [getBadgeCustomProperty(name, 'color')]:
25 | styles?.color || color || '#474D66',
26 | [getBadgeCustomProperty(name, 'border-width')]:
27 | styles?.borderWidth || '1px',
28 | [getBadgeCustomProperty(name, 'border-style')]:
29 | styles?.borderStyle || 'solid',
30 | [getBadgeCustomProperty(name, 'border-radius')]:
31 | styles?.borderRadius || '3px',
32 | [getBadgeCustomProperty(name, 'font-family')]:
33 | styles?.fontFamily || 'inherit',
34 | [getBadgeCustomProperty(name, 'font-size')]:
35 | styles?.fontSize || '0.625rem',
36 | [getBadgeCustomProperty(name, 'font-weight')]:
37 | styles?.fontWeight || 'bold',
38 | [getBadgeCustomProperty(name, 'line-height')]: styles?.lineHeight || '1',
39 | [getBadgeCustomProperty(name, 'padding-block')]:
40 | styles?.paddingBlock || '2px',
41 | [getBadgeCustomProperty(name, 'padding-inline')]:
42 | styles?.paddingInline || '5px',
43 | [getBadgeCustomProperty(name, 'text-transform')]:
44 | styles?.textTransform || 'uppercase',
45 | }),
46 | {}
47 | );
48 |
49 | interface BadgesWrapperProps {
50 | badgesConfig: BadgesConfig;
51 | }
52 |
53 | const BadgesWrapper = styled.div(
54 | ({ theme, badgesConfig }) => ({
55 | ...getCustomProperties(badgesConfig),
56 | marginInline: theme.layoutMargin / -2,
57 | paddingLeft: theme.layoutMargin,
58 | display: 'flex',
59 | alignItems: 'center',
60 | })
61 | );
62 |
63 | export const Badges: FC = ({
64 | badges = [],
65 | badgesConfig = defaultBadgesConfig,
66 | }) => (
67 | <>
68 |
69 |
70 | {badges.map((badge, index) => (
71 |
72 | ))}
73 |
74 |
75 | >
76 | );
77 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/app/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@geometricpanda/storybook-addons",
3 | "version": "0.2.2",
4 | "license": "MIT",
5 | "scripts": {
6 | "nx": "nx",
7 | "start": "nx serve",
8 | "build": "nx build",
9 | "test": "nx test",
10 | "lint": "nx workspace-lint && nx lint",
11 | "e2e": "nx e2e",
12 | "affected:apps": "nx affected:apps",
13 | "affected:libs": "nx affected:libs",
14 | "affected:build": "nx affected:build",
15 | "affected:e2e": "nx affected:e2e",
16 | "affected:test": "nx affected:test",
17 | "affected:lint": "nx affected:lint",
18 | "affected:dep-graph": "nx affected:dep-graph",
19 | "affected": "nx affected",
20 | "format": "nx format:write",
21 | "format:write": "nx format:write",
22 | "format:check": "nx format:check",
23 | "update": "nx migrate latest",
24 | "workspace-generator": "nx workspace-generator",
25 | "dep-graph": "nx dep-graph",
26 | "help": "nx help"
27 | },
28 | "private": true,
29 | "dependencies": {
30 | "@storybook/addons": "6.2.9",
31 | "@storybook/api": "6.2.9",
32 | "@storybook/components": "6.2.9",
33 | "@storybook/theming": "6.2.9",
34 | "caniuse-lite": "^1.0.30001258",
35 | "core-js": "^3.6.5",
36 | "document-register-element": "1.13.1",
37 | "react": "17.0.2",
38 | "react-dom": "17.0.2",
39 | "react-is": "17.0.2",
40 | "styled-components": "5.2.1",
41 | "tslib": "^2.0.0"
42 | },
43 | "devDependencies": {
44 | "@babel/core": "7.9.6",
45 | "@babel/preset-env": "7.9.6",
46 | "@babel/preset-react": "7.9.4",
47 | "@babel/preset-typescript": "7.9.0",
48 | "@nrwl/cli": "12.9.0",
49 | "@nrwl/eslint-plugin-nx": "12.9.0",
50 | "@nrwl/jest": "12.9.0",
51 | "@nrwl/react": "12.9.0",
52 | "@nrwl/storybook": "12.9.0",
53 | "@nrwl/tao": "12.9.0",
54 | "@nrwl/web": "12.9.0",
55 | "@nrwl/workspace": "12.9.0",
56 | "@storybook/addon-docs": "6.2.9",
57 | "@storybook/addon-essentials": "~6.3.0",
58 | "@storybook/react": "~6.3.0",
59 | "@svgr/webpack": "^5.4.0",
60 | "@testing-library/react": "11.2.5",
61 | "@types/enzyme": "^3.10.8",
62 | "@types/jest": "^26.0.20",
63 | "@types/node": "14.14.33",
64 | "@types/react": "17.0.3",
65 | "@types/react-dom": "17.0.3",
66 | "@types/react-is": "17.0.0",
67 | "@types/react-test-renderer": "^17.0.0",
68 | "@types/styled-components": "5.1.9",
69 | "@types/webpack": "4.41.21",
70 | "@typescript-eslint/eslint-plugin": "4.19.0",
71 | "@typescript-eslint/parser": "4.19.0",
72 | "babel-jest": "26.2.2",
73 | "babel-loader": "8.1.0",
74 | "babel-plugin-styled-components": "1.10.7",
75 | "dotenv": "10.0.0",
76 | "eslint": "7.22.0",
77 | "eslint-config-prettier": "8.1.0",
78 | "eslint-plugin-import": "2.22.1",
79 | "eslint-plugin-jsx-a11y": "6.4.1",
80 | "eslint-plugin-react": "7.23.1",
81 | "eslint-plugin-react-hooks": "4.2.0",
82 | "jest": "27.0.3",
83 | "jest-junit": "^12.0.0",
84 | "jest-styled-components": "^7.0.3",
85 | "prettier": "2.4.1",
86 | "react-test-renderer": "^17.0.1",
87 | "sync-json": "^1.0.2",
88 | "ts-jest": "27.0.3",
89 | "ts-node": "~9.1.1",
90 | "tsconfig-paths-webpack-plugin": "^3.5.1",
91 | "tslint": "~6.1.0",
92 | "typescript": "4.3.5",
93 | "url-loader": "^3.0.0"
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/src/lib/helpers/helpers.spec.ts:
--------------------------------------------------------------------------------
1 | import { BadgeConfig, BadgesConfig } from '../types';
2 | import { defaultBadgeConfig } from '../shared';
3 | import { getBadgeConfig, getColor, getContrastColor, getTitle } from './helpers';
4 |
5 | enum BADGE_KEYS {
6 | BADGE = 'badge',
7 | NO_TITLE = 'no-title',
8 | NO_COLOR = 'no-color',
9 | NO_CONTRAST = 'no-contrast',
10 | UNKNOWN_BADGE = 'unknown'
11 | }
12 |
13 | const badgeConfig: BadgesConfig = {
14 | [BADGE_KEYS.BADGE]: {
15 | title: 'Badge',
16 | contrast: '#6200EE',
17 | color: '#018786'
18 | },
19 | [BADGE_KEYS.NO_TITLE]: {
20 | contrast: '#6200EE',
21 | color: '#018786'
22 | },
23 | [BADGE_KEYS.NO_COLOR]: {
24 | title: 'Badge',
25 | contrast: '#6200EE'
26 | },
27 | [BADGE_KEYS.NO_CONTRAST]: {
28 | title: 'Badge',
29 | color: '#018786'
30 | }
31 | };
32 |
33 | describe('getBadgeConfig', () => {
34 |
35 | it('should return the full badge config', () => {
36 | const config = getBadgeConfig(BADGE_KEYS.BADGE, badgeConfig[BADGE_KEYS.BADGE]);
37 | const expectedConfig: BadgeConfig = badgeConfig[BADGE_KEYS.BADGE];
38 | expect(config).toEqual(expectedConfig);
39 | });
40 |
41 | it('should return a full badge config with key as title', () => {
42 | const config = getBadgeConfig(BADGE_KEYS.NO_TITLE, badgeConfig[BADGE_KEYS.NO_TITLE]);
43 |
44 | const expectedConfig: BadgeConfig = {
45 | ...badgeConfig[BADGE_KEYS.NO_TITLE],
46 | title: BADGE_KEYS.NO_TITLE
47 | };
48 |
49 | expect(config).toEqual(expectedConfig);
50 | });
51 |
52 | it('should return a full badge config with default colour', () => {
53 | const config = getBadgeConfig(BADGE_KEYS.NO_COLOR, badgeConfig[BADGE_KEYS.NO_COLOR]);
54 |
55 | const expectedConfig: BadgeConfig = {
56 | ...badgeConfig[BADGE_KEYS.NO_COLOR],
57 | color: defaultBadgeConfig.color
58 | };
59 |
60 | expect(config).toEqual(expectedConfig);
61 | });
62 |
63 | it('should return a full badge config with default contrast', () => {
64 | const config = getBadgeConfig(BADGE_KEYS.NO_CONTRAST, badgeConfig[BADGE_KEYS.NO_CONTRAST]);
65 |
66 | const expectedConfig: BadgeConfig = {
67 | ...badgeConfig[BADGE_KEYS.NO_CONTRAST],
68 | contrast: defaultBadgeConfig.contrast
69 | };
70 |
71 | expect(config).toEqual(expectedConfig);
72 | });
73 |
74 | });
75 |
76 | describe('getColor', () => {
77 | it('should return the configured color', () => {
78 | const color = getColor(BADGE_KEYS.BADGE, badgeConfig[BADGE_KEYS.BADGE]);
79 | expect(color).toBe(badgeConfig[BADGE_KEYS.BADGE].color);
80 | });
81 |
82 | it('should return the default color', () => {
83 | const color = getColor(BADGE_KEYS.UNKNOWN_BADGE, badgeConfig[BADGE_KEYS.UNKNOWN_BADGE]);
84 | expect(color).toBe(defaultBadgeConfig.color);
85 | });
86 | });
87 |
88 | describe('getContrastColor', () => {
89 | it('should return the configured contrast', () => {
90 | const contrast = getContrastColor(BADGE_KEYS.BADGE, badgeConfig[BADGE_KEYS.BADGE]);
91 | expect(contrast).toBe(badgeConfig[BADGE_KEYS.BADGE].contrast);
92 | });
93 |
94 | it('should return the default contrast', () => {
95 | const contrast = getContrastColor(BADGE_KEYS.UNKNOWN_BADGE, badgeConfig[BADGE_KEYS.UNKNOWN_BADGE]);
96 | expect(contrast).toBe(defaultBadgeConfig.contrast);
97 | });
98 | });
99 |
100 | describe('getTitle', () => {
101 | it('should return the configured title', () => {
102 | const title = getTitle(BADGE_KEYS.BADGE, badgeConfig[BADGE_KEYS.BADGE]);
103 | expect(title).toBe(badgeConfig[BADGE_KEYS.BADGE].title);
104 | });
105 |
106 | it('should return the key as title', () => {
107 | const title = getTitle(BADGE_KEYS.UNKNOWN_BADGE, badgeConfig[BADGE_KEYS.UNKNOWN_BADGE]);
108 | expect(title).toBe(BADGE_KEYS.UNKNOWN_BADGE);
109 | });
110 | });
111 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file
4 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
5 |
6 | ## 0.2.2
7 |
8 | ### Fixes
9 | - **@geometricpanda/storybook-addon-badges**: Lists storybook addons as a dependency. Resolving [#35](https://github.com/geometricpanda/geometricpanda/issues/35)
10 | - **@geometricpanda/storybook-addon-badges**: Lists styled components as a dependency. Resolving [#34](https://github.com/geometricpanda/geometricpanda/issues/34)
11 | - **@geometricpanda/storybook-addon-iframe**: Lists storybook addons as a dependency. Resolving [#35](https://github.com/geometricpanda/geometricpanda/issues/35)
12 | - **@geometricpanda/storybook-addon-iframe**: Lists styled components as a dependency. Resolving [#34](https://github.com/geometricpanda/geometricpanda/issues/34)
13 | -
14 | ## 0.2.1
15 |
16 | ### Fixes
17 |
18 | - **@geometricpanda/storybook-addon-badges**: Lists storybook as a peer dependency. Resolving [#32](https://github.com/geometricpanda/geometricpanda/issues/32)
19 | - **@geometricpanda/storybook-addon-badges**: Uses camel case for customisable properties. Resolving [#30](https://github.com/geometricpanda/geometricpanda/issues/30)
20 | - **@geometricpanda/storybook-addon-iframe**: Lists storybook as a peer dependency. Resolving [#32](https://github.com/geometricpanda/geometricpanda/issues/32)
21 |
22 | ## 0.2.0
23 |
24 | ### Fixes
25 |
26 | - **@geometricpanda/storybook-addon-badges**: Resolves minor badge misalignment
27 |
28 | ### Features
29 |
30 | - **@geometricpanda/storybook-addon-badges**: Allows greater theming of badges using the `styles` configuration parameter.
31 |
32 | ### Deprecations
33 |
34 | - **@geometricpanda/storybook-addon-badges**: Deprecation on `color` and `contrast` configuration parameters, will be removed in 1.0.0.
35 |
36 | ## 0.1.0
37 |
38 | ### Features
39 |
40 | - **@geometricpanda/storybook-addon-badges**: Integrates with Storybook tooltips.
41 |
42 | Thanks to [clbagrat](https://github.com/clbagrat).
43 |
44 | ## 0.0.5
45 |
46 | ### Features
47 |
48 | - **@geometricpanda/storybook-addon-badges**: Updates style of badges to be less prominent
49 | - **@geometricpanda/storybook-addon-iframe**: Changes animation style to fade
50 |
51 | ### Fixes
52 |
53 | - **@geometricpanda/storybook-addon-badges**: Adds `react-is` to dependencies. Resolving [#23](https://github.com/geometricpanda/geometricpanda/issues/23)
54 | - **@geometricpanda/storybook-addon-badges**: Adds `react-dom` to dependencies. Resolving [#24](https://github.com/geometricpanda/geometricpanda/issues/24)
55 |
56 | ### Other
57 |
58 | - **@geometricpanda/storybook-addon-badges**: Replaces `styled-components` with `@storybook/theming`
59 | - **@geometricpanda/storybook-addon-iframe**: Replaces `styled-components` with `@storybook/theming`
60 |
61 | ## 0.0.4
62 |
63 | ### Features
64 |
65 | - **@geometricpanda/storybook-addon-badges**: Adds a suite of default badge styles [#20](https://github.com/geometricpanda/geometricpanda/issues/20)
66 | - **@geometricpanda/storybook-addon-badges**: Updates style of badges to be more prominent [#20](https://github.com/geometricpanda/geometricpanda/issues/20)
67 |
68 | ## 0.0.3
69 |
70 | ### Features
71 |
72 | - **@geometricpanda/storybook-addon-iframe**: Exporting `ADDON_ID` to allow consumers to rename tab titles without using magic strings [#17](https://github.com/geometricpanda/geometricpanda/issues/17)
73 |
74 | ### Docs
75 |
76 | - **@geometricpanda/storybook-addon-iframe**: Documenting how to rename Storybook tab titles URL [#17](https://github.com/geometricpanda/geometricpanda/issues/17)
77 |
78 | ## 0.0.2
79 |
80 | ### Fixes
81 |
82 | - **@geometricpanda/storybook-addon-iframe**: Removed console log in `manager.tsx` [#12](https://github.com/geometricpanda/geometricpanda/issues/12)
83 |
84 | ### Docs
85 |
86 | - **@geometricpanda/storybook-addon-badges**: Updated grammar in `package.json` which reflects onto the Storybook addons directory [#14](https://github.com/geometricpanda/geometricpanda/issues/14)
87 | - **@geometricpanda/storybook-addon-iframe**: Removed typo in docs URL `htttps` to `https` [#13](https://github.com/geometricpanda/geometricpanda/issues/13)
88 |
89 | ## 0.0.1
90 |
91 | ### Features
92 |
93 | - **@geometricpanda/storybook-addon-badges**: Initial commit of `@geometricpanda/storybook-addon-badges`.
94 | - **@geometricpanda/storybook-addon-iframe**: Initial commit of `@geometricpanda/storybook-addon-iframe`.
95 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/stories/iframe.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs/blocks';
2 |
3 |
9 |
10 | # Storybook Addon iFrame
11 |
12 | Using `@geometricpanda/storybook-addon-iframe` you're able to embed external content through a
13 | tab in the Storybook toolbar
14 |
15 | ## Installation
16 |
17 | NPM:
18 | ```shell
19 | npm install @geometricpanda/storybook-addon-iframe
20 | ```
21 |
22 | Yarn:
23 | ```shell
24 | yarn add @geometricpanda/storybook-addon-iframe
25 | ```
26 |
27 | ## Configuration
28 |
29 | In your `.storybook/main.js` you'll need to load `@geometricpanda/storybook-addon-iframe` into Storybook:
30 |
31 | ```js
32 | // .storybook/main.js
33 | module.exports = {
34 | stories: [],
35 | addons: [
36 | '@geometricpanda/storybook-addon-iframe'
37 | ]
38 | };
39 | ```
40 |
41 | Optionally, you can define top level config `.storybook/preview.js`.
42 |
43 | ```js
44 | // .storybook/preview.js
45 | import {addParameters} from '@storybook/react';
46 |
47 | addParameters({
48 | iframe: {
49 | url: 'https://www.bing.com',
50 | timeout: 1000
51 | }
52 | });
53 | ```
54 |
55 | - `iframe.url` configures the default iFrame URL, this is optional.
56 | - `iframe.timeout` configures the Delay before the iFrame has considered not to have loaded , this is optional, defaulting to 10000 (or 10 seconds)
57 |
58 | _Tip: If you prefer, instead of using the `addParameters` function, you can also
59 | export `const parameters` containing a full parameters object._
60 |
61 |
62 | ## Renaming the Tab
63 |
64 | Whilst potentially not the most intuitive way of renaming the tab, you're able to use Storybook's standard `previewTabs`
65 | functionality to rename the tab.
66 |
67 | Due to how `previewTabs` works you may also need to define `canvas` and `storybook/docs/panel` in order to maintain the
68 | default order of tabs (or configure how you wish).
69 |
70 | ```js
71 | // .storybook/preview.js
72 | import { addParameters } from '@storybook/react';
73 | import { ADDON_ID as ADDON_IFRAME } from '@geometricpanda/storybook-addon-iframe';
74 |
75 | addParameters({
76 | previewTabs: {
77 | canvas: {},
78 | 'storybook/docs/panel': {},
79 | [ADDON_IFRAME]: {
80 | title: 'External Content'
81 | }
82 | }
83 | });
84 | ```
85 |
86 | ## Component Story Format (CSF)
87 |
88 | ### All Stories
89 |
90 | The following will configure the iFrame to all components within your Story:
91 |
92 | ```jsx
93 | export default {
94 | title: 'Path/To/MyComponent',
95 | parameters: {
96 | iframe: {
97 | url: 'https://www.bing.com'
98 | }
99 | }
100 | };
101 |
102 | const Template = () => (Hello World );
103 |
104 | export const FirstComponent = Template.bind({});
105 | export const SecondComponent = Template.bind({});
106 | export const ThirdComponent = Template.bind({});
107 | ```
108 |
109 | ### Individual Stories
110 |
111 | You can also selectively add iFrames to each Story:
112 |
113 | ```jsx
114 | export default {
115 | title: 'Path/To/MyComponent',
116 | };
117 |
118 | const Template = () => (Hello World );
119 |
120 | export const FirstComponent = Template.bind({});
121 | FirstComponent.parameters = {
122 | iframe: {
123 | url: 'https://www.google.com',
124 | }
125 | };
126 |
127 | export const SecondComponent = Template.bind({});
128 | SecondComponent.parameters = {
129 | iframe: {
130 | url: 'https://www.bing.com',
131 | }
132 | };
133 |
134 | export const ThirdComponent = Template.bind({});
135 | SecondComponent.parameters = {
136 | iframe: {
137 | url: 'https://www.yahoo.com',
138 | timeout: 5000,
139 | }
140 | };
141 | ```
142 |
143 | ## MDX
144 |
145 | In your `mdx` documentation you can add iFrames to your stories
146 | using the ` ` component.
147 |
148 | ```jsx
149 | import { Meta } from '@storybook/addon-docs/blocks';
150 |
151 |
157 | ```
158 |
159 | ## Known Limitations
160 |
161 | Unfortunately due to Browser security concerns when using iFrame content served with the `x-frame-options: DENY` header,
162 | the iFrame won't show the content and will instead show the browser's broken pane window. I did consider trying to resolve
163 | this gracefully but ultimately felt it would impair the developer debug experience.
164 |
165 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.com/package/@geometricpanda/storybook-addon-iframe)
2 |
3 | # Storybook Addon iFrame
4 |
5 | Using `@geometricpanda/storybook-addon-iframe` you're able to embed external content through a tab in
6 | the [Storybook](https://storybook.js.org) toolbar.
7 |
8 | 
9 |
10 | ## Installation
11 |
12 | NPM:
13 |
14 | ```shell
15 | npm install @geometricpanda/storybook-addon-iframe --save
16 | ```
17 |
18 | Yarn:
19 |
20 | ```shell
21 | yarn add @geometricpanda/storybook-addon-iframe
22 | ```
23 |
24 | ## Configuration
25 |
26 | In your `.storybook/main.js` you'll need to load `@geometricpanda/storybook-addon-iframe` into Storybook:
27 |
28 | ```js
29 | // .storybook/main.js
30 | module.exports = {
31 | stories: [],
32 | addons: ['@geometricpanda/storybook-addon-iframe'],
33 | };
34 | ```
35 |
36 | Optionally, you can define top level config `.storybook/preview.js`.
37 |
38 | ```js
39 | // .storybook/preview.js
40 | import { addParameters } from '@storybook/react';
41 |
42 | addParameters({
43 | iframe: {
44 | url: 'https://www.bing.com',
45 | timeout: 1000,
46 | },
47 | });
48 | ```
49 |
50 | - `iframe.url` configures the default iFrame URL, this is optional.
51 | - `iframe.timeout` configures the Delay before the iFrame has considered not to have loaded , this is optional,
52 | defaulting to 10000 (or 10 seconds)
53 |
54 | _Tip: If you prefer, instead of using the `addParameters` function, you can also export `const parameters` containing a
55 | full parameters object._
56 |
57 | ## Renaming the Tab
58 |
59 | Whilst potentially not the most intuitive way of renaming the tab, you're able to use Storybook's standard `previewTabs`
60 | functionality to rename the tab.
61 |
62 | Due to how `previewTabs` works you may also need to define `canvas` and `storybook/docs/panel` in order to maintain the
63 | default order of tabs (or configure how you wish).
64 |
65 | ```typescript
66 | // .storybook/preview.js
67 | import { addParameters } from '@storybook/react';
68 | import { ADDON_ID as ADDON_IFRAME } from '@geometricpanda/storybook-addon-iframe';
69 |
70 | addParameters({
71 | previewTabs: {
72 | canvas: {},
73 | 'storybook/docs/panel': {},
74 | [ADDON_IFRAME]: {
75 | title: 'External Content',
76 | },
77 | },
78 | });
79 | ```
80 |
81 | ## Component Story Format (CSF)
82 |
83 | ### All Stories
84 |
85 | The following will configure the iFrame to all components within your Story:
86 |
87 | ```jsx
88 | export default {
89 | title: 'Path/To/MyComponent',
90 | parameters: {
91 | iframe: {
92 | url: 'https://www.bing.com',
93 | },
94 | },
95 | };
96 |
97 | const Template = () => Hello World ;
98 |
99 | export const FirstComponent = Template.bind({});
100 | export const SecondComponent = Template.bind({});
101 | export const ThirdComponent = Template.bind({});
102 | ```
103 |
104 | ### Individual Stories
105 |
106 | You can also selectively add iFrames to each Story:
107 |
108 | ```jsx
109 | export default {
110 | title: 'Path/To/MyComponent',
111 | };
112 |
113 | const Template = () => Hello World ;
114 |
115 | export const FirstComponent = Template.bind({});
116 | FirstComponent.parameters = {
117 | iframe: {
118 | url: 'https://www.google.com',
119 | },
120 | };
121 |
122 | export const SecondComponent = Template.bind({});
123 | SecondComponent.parameters = {
124 | iframe: {
125 | url: 'https://www.bing.com',
126 | },
127 | };
128 |
129 | export const ThirdComponent = Template.bind({});
130 | SecondComponent.parameters = {
131 | iframe: {
132 | url: 'https://www.yahoo.com',
133 | timeout: 5000,
134 | },
135 | };
136 | ```
137 |
138 | ## MDX
139 |
140 | In your `mdx` documentation you can add iFrames to your stories using the ` ` component.
141 |
142 | ```jsx
143 | import { Meta } from '@storybook/addon-docs/blocks';
144 |
145 | ;
153 | ```
154 |
155 | ## Known Limitations
156 |
157 | Unfortunately due to Browser security concerns when using iFrame content served with the `x-frame-options: DENY` header,
158 | the iFrame won't show the content and will instead show the browser's broken pane window. I did consider trying to resolve
159 | this gracefully but ultimately felt it would impair the developer debug experience.
160 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2.1
2 |
3 | parameters:
4 | libraries:
5 | type: string
6 | description: Libraries
7 | default: "storybook-addon-badges storybook-addon-iframe"
8 |
9 | workflows:
10 | version: 2
11 |
12 | build:
13 | jobs:
14 | - build-libraries:
15 | matrix:
16 | parameters:
17 | library:
18 | - "storybook-addon-badges"
19 | - "storybook-addon-iframe"
20 |
21 | - build-storybook:
22 | requires:
23 | - build-libraries
24 |
25 | - approve-storybook:
26 | type: approval
27 | filters:
28 | branches:
29 | only: /release\/.*/
30 |
31 | requires:
32 | - build-storybook
33 |
34 | - approve-libraries:
35 | type: approval
36 | filters:
37 | branches:
38 | only: /release\/.*/
39 |
40 | requires:
41 | - build-libraries
42 |
43 | - deploy-libraries:
44 | filters:
45 | branches:
46 | only: /release\/.*/
47 |
48 | matrix:
49 | parameters:
50 | library:
51 | - "storybook-addon-badges"
52 | - "storybook-addon-iframe"
53 |
54 | requires:
55 | - approve-libraries
56 |
57 | - deploy-storybook:
58 | filters:
59 | branches:
60 | only: /release\/.*/
61 |
62 | requires:
63 | - approve-storybook
64 |
65 | jobs:
66 |
67 | build-storybook:
68 | working_directory: ~/geometricpanda
69 |
70 | docker:
71 | - image: cimg/node:14.16.0
72 |
73 | steps:
74 | - checkout
75 |
76 | - restore_cache:
77 | key: dependency-cache-{{ checksum "yarn.lock" }}
78 |
79 | - run:
80 | name: Install Dependencies
81 | command: yarn --frozen-lockfile --non-interactive
82 |
83 | - save_cache:
84 | key: dependency-cache-{{ checksum "yarn.lock" }}
85 | paths:
86 | - ./node_modules
87 |
88 | - attach_workspace:
89 | at: ~/geometricpanda
90 |
91 | - run:
92 | name: Install Libraries to Mono Repo
93 | command: |
94 | packagesArr=(<< pipeline.parameters.libraries >>)
95 | packagesAcc="";
96 |
97 | for package in "${packagesArr[@]}"
98 | do
99 | packagesAcc="${packagesAcc} @geometricpanda/${package}";
100 | cd ~/geometricpanda/dist/libs/${package};
101 | yarn link;
102 | done
103 |
104 | cd ~/geometricpanda;
105 | yarn link ${packagesAcc} --frozen-lockfile;
106 | - run:
107 | name: Build Storybook
108 | command: yarn nx run geometricpanda:build-storybook:ci
109 |
110 | - persist_to_workspace:
111 | root: ~/geometricpanda
112 | paths:
113 | - dist/storybook
114 |
115 | build-libraries:
116 | working_directory: ~/geometricpanda
117 |
118 | docker:
119 | - image: cimg/node:14.16.0
120 |
121 | parameters:
122 | library:
123 | type: string
124 |
125 | steps:
126 | - checkout
127 |
128 | - restore_cache:
129 | key: dependency-cache-{{ checksum "yarn.lock" }}
130 |
131 | - run:
132 | name: Install Dependencies
133 | command: yarn --frozen-lockfile --non-interactive
134 |
135 | - save_cache:
136 | key: dependency-cache-{{ checksum "yarn.lock" }}
137 | paths:
138 | - ./node_modules
139 |
140 | - run:
141 | name: Lint
142 | command: yarn lint << parameters.library >>
143 |
144 | - run:
145 | name: Build
146 | command: yarn build << parameters.library >>
147 |
148 | - run:
149 | name: Sync Package JSONS
150 | command: |
151 | npx --no-install sync-json -v --property version --source package.json dist/libs/<< parameters.library >>/package.json
152 |
153 | - persist_to_workspace:
154 | root: ~/geometricpanda
155 | paths:
156 | - dist/libs/<< parameters.library >>
157 |
158 | deploy-libraries:
159 | working_directory: ~/geometricpanda
160 |
161 | docker:
162 | - image: cimg/node:14.16.0
163 |
164 | parameters:
165 | library:
166 | type: string
167 |
168 | steps:
169 | - attach_workspace:
170 | at: ~/geometricpanda
171 |
172 | - run:
173 | name: Authenticate with registry
174 | command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
175 |
176 | - run:
177 | name: Deploy Package
178 | command: |
179 | npm publish dist/libs/<< parameters.library >> --access public
180 |
181 |
182 | deploy-storybook:
183 | working_directory: ~/geometricpanda
184 |
185 | docker:
186 | - image: cimg/node:14.16.0
187 |
188 | steps:
189 | - checkout
190 |
191 | - restore_cache:
192 | key: dependency-cache-{{ checksum "yarn.lock" }}
193 |
194 | - attach_workspace:
195 | at: ~/geometricpanda
196 |
197 | - run:
198 | name: Add Netlify CLI
199 | command: |
200 | npm init --force &> /dev/null;
201 | yarn add netlify-cli --dev
202 |
203 | - run:
204 | name: Deploy to Netlify
205 | command: |
206 | npx --no-install netlify deploy --dir dist/storybook/geometricpanda --prod
207 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/app/app.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styled from 'styled-components';
4 |
5 | import { ReactComponent as Logo } from './logo.svg';
6 | import star from './star.svg';
7 |
8 | const StyledApp = styled.div`
9 | font-family: sans-serif;
10 | min-width: 300px;
11 | max-width: 600px;
12 | margin: 50px auto;
13 |
14 | .gutter-left {
15 | margin-left: 9px;
16 | }
17 |
18 | .col-span-2 {
19 | grid-column: span 2;
20 | }
21 |
22 | .flex {
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | }
27 |
28 | header {
29 | background-color: #143055;
30 | color: white;
31 | padding: 5px;
32 | border-radius: 3px;
33 | }
34 |
35 | main {
36 | padding: 0 36px;
37 | }
38 |
39 | p {
40 | text-align: center;
41 | }
42 |
43 | h1 {
44 | text-align: center;
45 | margin-left: 18px;
46 | font-size: 24px;
47 | }
48 |
49 | h2 {
50 | text-align: center;
51 | font-size: 20px;
52 | margin: 40px 0 10px 0;
53 | }
54 |
55 | .resources {
56 | text-align: center;
57 | list-style: none;
58 | padding: 0;
59 | display: grid;
60 | grid-gap: 9px;
61 | grid-template-columns: 1fr 1fr;
62 | }
63 |
64 | .resource {
65 | color: #0094ba;
66 | height: 36px;
67 | background-color: rgba(0, 0, 0, 0);
68 | border: 1px solid rgba(0, 0, 0, 0.12);
69 | border-radius: 4px;
70 | padding: 3px 9px;
71 | text-decoration: none;
72 | }
73 |
74 | .resource:hover {
75 | background-color: rgba(68, 138, 255, 0.04);
76 | }
77 |
78 | pre {
79 | padding: 9px;
80 | border-radius: 4px;
81 | background-color: black;
82 | color: #eee;
83 | }
84 |
85 | details {
86 | border-radius: 4px;
87 | color: #333;
88 | background-color: rgba(0, 0, 0, 0);
89 | border: 1px solid rgba(0, 0, 0, 0.12);
90 | padding: 3px 9px;
91 | margin-bottom: 9px;
92 | }
93 |
94 | summary {
95 | outline: none;
96 | height: 36px;
97 | line-height: 36px;
98 | }
99 |
100 | .github-star-container {
101 | margin-top: 12px;
102 | line-height: 20px;
103 | }
104 |
105 | .github-star-container a {
106 | display: flex;
107 | align-items: center;
108 | text-decoration: none;
109 | color: #333;
110 | }
111 |
112 | .github-star-badge {
113 | color: #24292e;
114 | display: flex;
115 | align-items: center;
116 | font-size: 12px;
117 | padding: 3px 10px;
118 | border: 1px solid rgba(27, 31, 35, 0.2);
119 | border-radius: 3px;
120 | background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
121 | margin-left: 4px;
122 | font-weight: 600;
123 | }
124 |
125 | .github-star-badge:hover {
126 | background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
127 | border-color: rgba(27, 31, 35, 0.35);
128 | background-position: -0.5em;
129 | }
130 | .github-star-badge .material-icons {
131 | height: 16px;
132 | width: 16px;
133 | margin-right: 4px;
134 | }
135 | `;
136 |
137 | export function App() {
138 | return (
139 |
140 |
141 |
142 | Welcome to geometricpanda!
143 |
144 |
145 | Resources & Tools
146 | Thank you for using and showing some ♥ for Nx.
147 |
161 | Here are some links to help you get started.
162 |
201 | Next Steps
202 | Here are some things you can do with Nx.
203 |
204 | Add UI library
205 | {`# Generate UI lib
206 | nx g @nrwl/react:lib ui
207 |
208 | # Add a component
209 | nx g @nrwl/react:component xyz --project ui`}
210 |
211 |
212 | View dependency graph
213 | {`nx dep-graph`}
214 |
215 |
216 | Run affected commands
217 | {`# see what's been affected by changes
218 | nx affected:dep-graph
219 |
220 | # run tests for current changes
221 | nx affected:test
222 |
223 | # run e2e tests for current changes
224 | nx affected:e2e
225 | `}
226 |
227 |
228 |
229 | );
230 | }
231 |
232 | export default App;
233 |
--------------------------------------------------------------------------------
/libs/storybook-addon-badges/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.com/package/@geometricpanda/storybook-addon-badges)
2 |
3 | # Storybook Addon Badges
4 |
5 | Using `@geometricpanda/storybook-addon-badges` you're able to add badges to
6 | your [Storybook](https://storybook.js.org) app.
7 |
8 | 
9 |
10 | ## Installation
11 |
12 | NPM:
13 |
14 | ```shell
15 | npm install @geometricpanda/storybook-addon-badges --save
16 | ```
17 |
18 | Yarn:
19 |
20 | ```shell
21 | yarn add @geometricpanda/storybook-addon-badges
22 | ```
23 |
24 | ## Configuration
25 |
26 | In your `.storybook/main.js` you'll need to load `@geometricpanda/storybook-addon-badges` into Storybook:
27 |
28 | ```js
29 | // .storybook/main.js
30 | module.exports = {
31 | stories: [],
32 | addons: ['@geometricpanda/storybook-addon-badges'],
33 | };
34 | ```
35 |
36 | Optionally, you can define custom badge styles in `.storybook/preview.js`.
37 |
38 | ```js
39 | // .storybook/preview.js
40 | import { addParameters } from '@storybook/react';
41 |
42 | addParameters({
43 | badgesConfig: {
44 | beta: {
45 | styles: {
46 | backgroundColor: '#FFF',
47 | borderColor: '#018786',
48 | color: '#018786',
49 | },
50 | title: 'Beta',
51 | },
52 | deprecated: {
53 | styles: {
54 | backgroundColor: '#FFF',
55 | borderColor: '#6200EE',
56 | color: '#6200EE',
57 | },
58 | title: 'Deprecated',
59 | },
60 | },
61 | });
62 | ```
63 |
64 | ### Tooltips
65 |
66 | Optionally, you can define more complex tooltips for any of your badges.
67 |
68 | ```js
69 | addParameters({
70 | badgesConfig: {
71 | beta: {
72 | ...betaConfig,
73 | tooltip: {
74 | title: 'This is Beta',
75 | desc: 'Be ready to receive updates frequently and leave a feedback',
76 | links: [
77 | { title: 'Read more', href: 'http://path/to/your/docs' },
78 | {
79 | title: 'Leave feedback',
80 | onClick: () => {
81 | alert('thanks for the feedback');
82 | },
83 | },
84 | ],
85 | },
86 | },
87 | deprecated: {
88 | ...deprecatedConfig,
89 | tooltip: 'This component is deprecated, please avoid using it.',
90 | },
91 | },
92 | });
93 | ```
94 |
95 | The key for each badge will be what's used throughout storybook to invoke that badge.
96 |
97 | I tend to define each key as an `enum` when using TypeScript, or even an `Object` in plain JavaScript
98 | to avoid using magic strings.
99 |
100 | Don't worry if you haven't defined a badge which you use later, any badges which aren't recognised fall
101 | back to the default preconfigured grey.
102 |
103 | _Tip: If you prefer, instead of using the `addParameters` function, you can also
104 | export `const parameters` containing a full parameters object._
105 |
106 | ```typescript
107 | // .storybook/constants.js
108 | export enum BADGES {
109 | STATUS = 'status',
110 | }
111 |
112 | // .storybook/preview.js
113 | import { addParameters } from '@storybook/react';
114 |
115 | addParameters({
116 | badgesConfig: {
117 | [BADGES.STATUS]: {
118 | styles: {
119 | backgroundColor: '#FFF',
120 | borderColor: '#018786',
121 | color: '#018786',
122 | },
123 | title: 'Status',
124 | },
125 | },
126 | });
127 | ```
128 |
129 | ## Preconfigured badges
130 |
131 | You can import a collection of preconfigured badges using the following import:
132 |
133 | ```js
134 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
135 | ```
136 |
137 | You can then use these badges by passing in the following enum values:
138 |
139 | - `BADGE.DEFAULT`
140 | - `BADGE.BETA`
141 | - `BADGE.STABLE`
142 | - `BADGE.DEPRECATED`
143 | - `BADGE.EXPERIMENTAL`
144 | - `BADGE.NEEDS_REVISION`
145 | - `BADGE.OBSOLETE`
146 |
147 | Should you wish to override these styles you can do by configuring a badge with the same key:
148 |
149 | ```typescript
150 | // .storybook/preview.js
151 | import { addParameters } from '@storybook/react';
152 |
153 | addParameters({
154 | badgesConfig: {
155 | [BADGES.STATUS]: {
156 | styles: {
157 | backgroundColor: '#FFF',
158 | borderColor: '#018786',
159 | color: '#018786',
160 | },
161 | title: 'Status',
162 | },
163 | },
164 | });
165 | ```
166 |
167 | Valid options for the `styles` configuration are:
168 |
169 | - `backgroundColor`
170 | - `borderColor`
171 | - `borderRadius`
172 | - `borderStyle`
173 | - `borderWidth`
174 | - `color`
175 | - `fontSize`
176 | - `fontFamily`
177 | - `fontWeight`
178 | - `lineHeight`
179 | - `textTransform`
180 | - `paddingInline`
181 | - `paddingBlock`
182 |
183 | #### Deprecation Notice
184 |
185 | The previous `color` and `contrast` properties have been deprecated and are due to be removed in 1.0.0.
186 | Please migrate to the `styles` property.
187 |
188 | By setting a `styles` property which conflicts with a prior `color` or `contrast` value, the `styles` property will
189 | take precedence.
190 |
191 | ## Component Story Format (CSF)
192 |
193 | ### All Stories
194 |
195 | The following will apply the badges to all components within your Story:
196 |
197 | ```jsx
198 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
199 |
200 | export default {
201 | title: 'Path/To/MyComponent',
202 | parameters: {
203 | badges: [BADGE.DEPRECATED, BADGE.OBSOLETE],
204 | },
205 | };
206 |
207 | const Template = () => Hello World ;
208 |
209 | export const FirstComponent = Template.bind({});
210 | export const SecondComponent = Template.bind({});
211 | export const ThirdComponent = Template.bind({});
212 | ```
213 |
214 | ### Individual Stories
215 |
216 | You can also selectively add badges to each Story:
217 |
218 | ```jsx
219 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
220 |
221 | export default {
222 | title: 'Path/To/MyComponent',
223 | };
224 |
225 | const Template = () => Hello World ;
226 |
227 | export const FirstComponent = Template.bind({});
228 | FirstComponent.parameters = {
229 | badges: [BADGE.DEPRECATED],
230 | };
231 |
232 | export const SecondComponent = Template.bind({});
233 | SecondComponent.parameters = {
234 | badges: [BADGE.STABLE],
235 | };
236 |
237 | export const ThirdComponent = Template.bind({});
238 | ThirdComponent.parameters = {
239 | badges: [BADGE.OBSOLETE],
240 | };
241 | ```
242 |
243 | ### Removing Badges from Stories
244 |
245 | When applying Badges to all Stories you can selectively remove them too:
246 |
247 | ```jsx
248 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
249 |
250 | export default {
251 | title: 'Path/To/MyComponent',
252 | parameters: {
253 | badges: [BADGE.BETA],
254 | },
255 | };
256 |
257 | const Template = () => Hello World ;
258 |
259 | export const FirstComponent = Template.bind({});
260 | export const SecondComponent = Template.bind({});
261 |
262 | export const ThirdComponent = Template.bind({});
263 | ThirdComponent.parameters = {
264 | badges: [],
265 | };
266 | ```
267 |
268 | ## MDX
269 |
270 | In your `mdx` documentation you can add badges to your stories
271 | using the ` ` component.
272 |
273 | ```jsx
274 | import { Meta } from '@storybook/addon-docs/blocks';
275 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
276 |
277 | ;
278 | ```
279 |
--------------------------------------------------------------------------------
/apps/geometricpanda/src/stories/badges.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs/blocks';
2 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
3 |
4 |
18 |
19 | # Storybook Addon Badges
20 |
21 | Using `@geometricpanda/storybook-addon-badges` you're able to add badges to
22 | your Storybook app.
23 |
24 | ## Installation
25 |
26 | NPM:
27 |
28 | ```shell
29 | npm install @geometricpanda/storybook-addon-badges
30 | ```
31 |
32 | Yarn:
33 |
34 | ```shell
35 | yarn add @geometricpanda/storybook-addon-badges
36 | ```
37 |
38 | ## Configuration
39 |
40 | In your `.storybook/main.js` you'll need to load `@geometricpanda/storybook-addon-badges` into Storybook:
41 |
42 | ```js
43 | // .storybook/main.js
44 | module.exports = {
45 | stories: [],
46 | addons: ['@geometricpanda/storybook-addon-badges'],
47 | };
48 | ```
49 |
50 | Optionally, you can define custom badge styles in `.storybook/preview.js`.
51 |
52 | ```js
53 | // .storybook/preview.js
54 | import { addParameters } from '@storybook/react';
55 |
56 | addParameters({
57 | badgesConfig: {
58 | beta: {
59 | styles: {
60 | backgroundColor: '#FFF',
61 | borderColor: '#018786',
62 | color: '#018786',
63 | },
64 | title: 'Beta',
65 | },
66 | deprecated: {
67 | styles: {
68 | backgroundColor: '#FFF',
69 | borderColor: '#6200EE',
70 | color: '#6200EE',
71 | },
72 | title: 'Deprecated',
73 | },
74 | },
75 | });
76 | ```
77 |
78 | ### Tooltips
79 |
80 | Optionally, you can define more complex tooltips for any of your badges.
81 |
82 | ```js
83 | import {
84 | BADGE,
85 | defaultBadgesConfig,
86 | } from '@geometricpanda/storybook-addon-badges';
87 |
88 | addParameters({
89 | badgesConfig: {
90 | [BADGE.BETA]: {
91 | ...defaultBadgesConfig[BADGE.BETA],
92 | tooltip: {
93 | title: 'This is Beta',
94 | desc: 'Be ready to receive updates frequently and leave a feedback',
95 | links: [
96 | { title: 'Read more', href: 'http://path/to/your/docs' },
97 | {
98 | title: 'Leave feedback',
99 | onClick: () => {
100 | alert('thanks for the feedback');
101 | },
102 | },
103 | ],
104 | },
105 | },
106 | [BADGE.BETA]: {
107 | ...defaultBadgesConfig[BADGE.DEPRECATED],
108 | tooltip: 'This component is deprecated, please avoid using it.',
109 | },
110 | },
111 | });
112 | ```
113 |
114 | The key for each badge will be what's used throughout storybook to invoke that badge.
115 |
116 | I tend to define each key as an `enum` when using TypeScript, or even an `Object` in plain JavaScript
117 | to avoid using magic strings.
118 |
119 | Don't worry if you haven't defined a badge which you use later, any badges which aren't recognised fall
120 | back to the default preconfigured grey.
121 |
122 | _Tip: If you prefer, instead of using the `addParameters` function, you can also
123 | export `const parameters` containing a full parameters object._
124 |
125 | ```typescript
126 | // .storybook/constants.js
127 | export enum BADGES {
128 | STATUS = 'status',
129 | }
130 |
131 | // .storybook/preview.js
132 | import { addParameters } from '@storybook/react';
133 |
134 | addParameters({
135 | badgesConfig: {
136 | [BADGES.STATUS]: {
137 | styles: {
138 | backgroundColor: '#FFF',
139 | borderColor: '#018786',
140 | color: '#018786',
141 | },
142 | title: 'Status',
143 | },
144 | },
145 | });
146 | ```
147 |
148 | ## Preconfigured badges
149 |
150 | You can import a collection of preconfigured badges using the following import:
151 |
152 | ```js
153 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
154 | ```
155 |
156 | You can then use these badges by passing in the following enum values:
157 |
158 | - `BADGE.DEFAULT`
159 | - `BADGE.BETA`
160 | - `BADGE.STABLE`
161 | - `BADGE.DEPRECATED`
162 | - `BADGE.EXPERIMENTAL`
163 | - `BADGE.NEEDS_REVISION`
164 | - `BADGE.OBSOLETE`
165 |
166 | Should you wish to override these styles you can do by configuring a badge with the same key:
167 |
168 | ```typescript
169 | // .storybook/preview.js
170 | import { addParameters } from '@storybook/react';
171 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
172 |
173 | addParameters({
174 | badgesConfig: {
175 | [BADGE.DEFAULT]: {
176 | styles: {
177 | backgroundColor: '#FFF',
178 | borderColor: '#018786',
179 | color: '#018786',
180 | },
181 | title: 'New Title',
182 | },
183 | },
184 | });
185 | ```
186 |
187 | Valid options for the `styles` configuration are:
188 |
189 | - `backgroundColor`
190 | - `borderColor`
191 | - `borderRadius`
192 | - `borderStyle`
193 | - `borderWidth`
194 | - `color`
195 | - `fontSize`
196 | - `fontFamily`
197 | - `fontWeight`
198 | - `lineHeight`
199 | - `textTransform`
200 | - `paddingInline`
201 | - `paddingBlock`
202 |
203 | #### Deprecation Notice
204 |
205 | The previous `color` and `contrast` properties have been deprecated and are due to be removed in 1.0.0.
206 | Please migrate to the `styles` property.
207 |
208 | By setting a `styles` property which conflicts with a prior `color` or `contrast` value, the `styles` property will
209 | take precedence.
210 |
211 | ## Component Story Format (CSF)
212 |
213 | ### All Stories
214 |
215 | The following will apply the badges to all components within your Story:
216 |
217 | ```jsx
218 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
219 |
220 | export default {
221 | title: 'Path/To/MyComponent',
222 | parameters: {
223 | badges: [BADGE.DEPRECATED, BADGE.OBSOLETE],
224 | },
225 | };
226 |
227 | const Template = () => Hello World ;
228 |
229 | export const FirstComponent = Template.bind({});
230 | export const SecondComponent = Template.bind({});
231 | export const ThirdComponent = Template.bind({});
232 | ```
233 |
234 | ### Individual Stories
235 |
236 | You can also selectively add badges to each Story:
237 |
238 | ```jsx
239 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
240 |
241 | export default {
242 | title: 'Path/To/MyComponent',
243 | };
244 |
245 | const Template = () => Hello World ;
246 |
247 | export const FirstComponent = Template.bind({});
248 | FirstComponent.parameters = {
249 | badges: [BADGE.DEPRECATED],
250 | };
251 |
252 | export const SecondComponent = Template.bind({});
253 | SecondComponent.parameters = {
254 | badges: [BADGE.STABLE],
255 | };
256 |
257 | export const ThirdComponent = Template.bind({});
258 | ThirdComponent.parameters = {
259 | badges: [BADGE.OBSOLETE],
260 | };
261 | ```
262 |
263 | ### Removing Badges from Stories
264 |
265 | When applying Badges to all Stories you can selectively remove them too:
266 |
267 | ```jsx
268 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
269 |
270 | export default {
271 | title: 'Path/To/MyComponent',
272 | parameters: {
273 | badges: [BADGE.BETA],
274 | },
275 | };
276 |
277 | const Template = () => Hello World ;
278 |
279 | export const FirstComponent = Template.bind({});
280 | export const SecondComponent = Template.bind({});
281 |
282 | export const ThirdComponent = Template.bind({});
283 | ThirdComponent.parameters = {
284 | badges: [],
285 | };
286 | ```
287 |
288 | ## MDX
289 |
290 | In your `mdx` documentation you can add badges to your stories
291 | using the ` ` component.
292 |
293 | ```jsx
294 | import { Meta } from '@storybook/addon-docs/blocks';
295 | import { BADGE } from '@geometricpanda/storybook-addon-badges';
296 |
297 | ;
298 | ```
299 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/icons/not-found.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const NotFoundIcon = () => (
4 |
5 |
8 |
11 |
14 |
17 |
20 |
23 |
26 |
29 |
32 |
35 |
38 |
40 |
42 |
44 |
46 |
48 |
50 |
52 |
54 |
56 |
57 | );
58 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/icons/error.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const ErrorIcon = () => (
4 |
5 |
8 |
11 |
14 |
17 |
20 |
23 |
26 |
29 |
32 |
35 |
38 |
40 |
42 |
44 |
46 |
48 |
50 |
51 | );
52 |
53 |
--------------------------------------------------------------------------------
/workspace.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "projects": {
4 | "geometricpanda": {
5 | "root": "apps/geometricpanda",
6 | "sourceRoot": "apps/geometricpanda/src",
7 | "projectType": "application",
8 | "targets": {
9 | "build": {
10 | "executor": "@nrwl/web:build",
11 | "outputs": ["{options.outputPath}"],
12 | "options": {
13 | "outputPath": "dist/apps/geometricpanda",
14 | "index": "apps/geometricpanda/src/index.html",
15 | "main": "apps/geometricpanda/src/main.tsx",
16 | "polyfills": "apps/geometricpanda/src/polyfills.ts",
17 | "tsConfig": "apps/geometricpanda/tsconfig.app.json",
18 | "assets": [
19 | "apps/geometricpanda/src/favicon.ico",
20 | "apps/geometricpanda/src/assets"
21 | ],
22 | "styles": [],
23 | "scripts": [],
24 | "webpackConfig": "@nrwl/react/plugins/webpack"
25 | },
26 | "configurations": {
27 | "production": {
28 | "fileReplacements": [
29 | {
30 | "replace": "apps/geometricpanda/src/environments/environment.ts",
31 | "with": "apps/geometricpanda/src/environments/environment.prod.ts"
32 | }
33 | ],
34 | "optimization": true,
35 | "outputHashing": "all",
36 | "sourceMap": false,
37 | "extractCss": true,
38 | "namedChunks": false,
39 | "extractLicenses": true,
40 | "vendorChunk": false,
41 | "budgets": [
42 | {
43 | "type": "initial",
44 | "maximumWarning": "2mb",
45 | "maximumError": "5mb"
46 | }
47 | ]
48 | }
49 | }
50 | },
51 | "serve": {
52 | "executor": "@nrwl/web:dev-server",
53 | "options": {
54 | "buildTarget": "geometricpanda:build"
55 | },
56 | "configurations": {
57 | "production": {
58 | "buildTarget": "geometricpanda:build:production"
59 | }
60 | }
61 | },
62 | "lint": {
63 | "executor": "@nrwl/linter:eslint",
64 | "options": {
65 | "lintFilePatterns": ["apps/geometricpanda/**/*.{ts,tsx,js,jsx}"]
66 | }
67 | },
68 | "test": {
69 | "executor": "@nrwl/jest:jest",
70 | "outputs": ["coverage/apps/geometricpanda"],
71 | "options": {
72 | "jestConfig": "apps/geometricpanda/jest.config.js",
73 | "passWithNoTests": true
74 | }
75 | },
76 | "storybook": {
77 | "executor": "@nrwl/storybook:storybook",
78 | "options": {
79 | "uiFramework": "@storybook/react",
80 | "port": 4400,
81 | "config": {
82 | "configFolder": "apps/geometricpanda/.storybook"
83 | }
84 | },
85 | "configurations": {
86 | "ci": {
87 | "quiet": true
88 | }
89 | }
90 | },
91 | "build-storybook": {
92 | "executor": "@nrwl/storybook:build",
93 | "options": {
94 | "uiFramework": "@storybook/react",
95 | "outputPath": "dist/storybook/geometricpanda",
96 | "config": {
97 | "configFolder": "apps/geometricpanda/.storybook"
98 | }
99 | },
100 | "configurations": {
101 | "ci": {
102 | "quiet": true
103 | }
104 | }
105 | }
106 | }
107 | },
108 | "storybook-addon-badges": {
109 | "root": "libs/storybook-addon-badges",
110 | "sourceRoot": "libs/storybook-addon-badges/src",
111 | "projectType": "library",
112 | "targets": {
113 | "lint": {
114 | "executor": "@nrwl/linter:eslint",
115 | "options": {
116 | "lintFilePatterns": [
117 | "libs/storybook-addon-badges/**/*.{ts,tsx,js,jsx}"
118 | ]
119 | }
120 | },
121 | "build": {
122 | "executor": "@nrwl/web:package",
123 | "outputs": ["{options.outputPath}"],
124 | "options": {
125 | "outputPath": "dist/libs/storybook-addon-badges",
126 | "tsConfig": "libs/storybook-addon-badges/tsconfig.lib.json",
127 | "project": "libs/storybook-addon-badges/package.json",
128 | "entryFile": "libs/storybook-addon-badges/src/index.ts",
129 | "external": ["react", "react-dom", "react-is", "styled-components"],
130 | "babelConfig": "@nrwl/react/plugins/bundle-babel",
131 | "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
132 | "globals": [
133 | {
134 | "moduleId": "react",
135 | "global": "react"
136 | },
137 | {
138 | "moduleId": "@storybook/addons",
139 | "global": "@storybook/addons"
140 | },
141 | {
142 | "moduleId": "@storybook/api",
143 | "global": "@storybook/api"
144 | },
145 | {
146 | "moduleId": "@storybook/components",
147 | "global": "@storybook/components"
148 | },
149 | {
150 | "moduleId": "@storybook/theming",
151 | "global": "@storybook/theming"
152 | }
153 | ],
154 | "assets": [
155 | {
156 | "glob": "*.md",
157 | "input": "libs/storybook-addon-badges",
158 | "output": "."
159 | },
160 | {
161 | "glob": "register.js",
162 | "input": "libs/storybook-addon-badges/src",
163 | "output": "."
164 | },
165 | {
166 | "glob": "preset.js",
167 | "input": "libs/storybook-addon-badges/src",
168 | "output": "."
169 | }
170 | ]
171 | }
172 | },
173 | "test": {
174 | "executor": "@nrwl/jest:jest",
175 | "outputs": ["coverage/libs/storybook-addon-badges"],
176 | "options": {
177 | "jestConfig": "libs/storybook-addon-badges/jest.config.js",
178 | "passWithNoTests": true
179 | }
180 | }
181 | }
182 | },
183 | "storybook-addon-iframe": {
184 | "root": "libs/storybook-addon-iframe",
185 | "sourceRoot": "libs/storybook-addon-iframe/src",
186 | "projectType": "library",
187 | "targets": {
188 | "lint": {
189 | "executor": "@nrwl/linter:eslint",
190 | "options": {
191 | "lintFilePatterns": [
192 | "libs/storybook-addon-iframe/**/*.{ts,tsx,js,jsx}"
193 | ]
194 | }
195 | },
196 | "build": {
197 | "executor": "@nrwl/web:package",
198 | "outputs": ["{options.outputPath}"],
199 | "options": {
200 | "outputPath": "dist/libs/storybook-addon-iframe",
201 | "tsConfig": "libs/storybook-addon-iframe/tsconfig.lib.json",
202 | "project": "libs/storybook-addon-iframe/package.json",
203 | "entryFile": "libs/storybook-addon-iframe/src/index.ts",
204 | "external": ["react", "react-dom", "react-is", "styled-components"],
205 | "babelConfig": "@nrwl/react/plugins/bundle-babel",
206 | "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
207 | "globals": [
208 | {
209 | "moduleId": "react",
210 | "global": "react"
211 | },
212 | {
213 | "moduleId": "@storybook/addons",
214 | "global": "@storybook/addons"
215 | },
216 | {
217 | "moduleId": "@storybook/api",
218 | "global": "@storybook/api"
219 | },
220 | {
221 | "moduleId": "@storybook/components",
222 | "global": "@storybook/components"
223 | },
224 | {
225 | "moduleId": "@storybook/theming",
226 | "global": "@storybook/theming"
227 | }
228 | ],
229 | "assets": [
230 | {
231 | "glob": "*.md",
232 | "input": "libs/storybook-addon-iframe",
233 | "output": "."
234 | },
235 | {
236 | "glob": "register.js",
237 | "input": "libs/storybook-addon-iframe/src",
238 | "output": "."
239 | },
240 | {
241 | "glob": "preset.js",
242 | "input": "libs/storybook-addon-iframe/src",
243 | "output": "."
244 | }
245 | ]
246 | }
247 | },
248 | "test": {
249 | "executor": "@nrwl/jest:jest",
250 | "outputs": ["coverage/libs/storybook-addon-iframe"],
251 | "options": {
252 | "jestConfig": "libs/storybook-addon-iframe/jest.config.js",
253 | "passWithNoTests": true
254 | }
255 | }
256 | }
257 | }
258 | },
259 | "cli": {
260 | "defaultCollection": "@nrwl/react"
261 | },
262 | "generators": {
263 | "@nrwl/react": {
264 | "application": {
265 | "style": "styled-components",
266 | "linter": "eslint",
267 | "babel": true
268 | },
269 | "component": {
270 | "style": "styled-components"
271 | },
272 | "library": {
273 | "style": "styled-components",
274 | "linter": "eslint"
275 | }
276 | }
277 | },
278 | "defaultProject": "geometricpanda"
279 | }
280 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/icons/speed.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const SpeedIcon = () => (
4 |
5 |
8 |
11 |
14 |
17 |
20 |
23 |
26 |
29 |
32 |
35 |
38 |
41 |
44 |
47 |
50 |
53 |
56 |
59 |
61 |
63 |
65 |
67 |
69 |
71 |
73 |
74 | );
75 |
76 |
--------------------------------------------------------------------------------
/libs/storybook-addon-iframe/src/lib/layouts/__snapshots__/embedded-iframe-layout.spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`EmbeddedIframeLayout should only show the iframe block on success 1`] = `
4 |
11 | `;
12 |
13 | exports[`EmbeddedIframeLayout should show a loading block 1`] = `
14 | Array [
15 |
18 |
21 |
25 |
29 |
33 |
37 |
41 |
45 |
49 |
53 |
57 |
61 |
65 |
69 |
73 |
77 |
81 |
85 |
89 |
93 |
97 |
100 |
103 |
106 |
109 |
112 |
115 |
118 |
119 |
120 |
123 | Loading
124 |
125 |
,
126 | ,
133 | ]
134 | `;
135 |
136 | exports[`EmbeddedIframeLayout should show an error block if loading has not completed within 10 seconds 1`] = `
137 |
140 |
143 |
147 |
151 |
155 |
159 |
163 |
167 |
171 |
175 |
179 |
183 |
187 |
191 |
194 |
197 |
200 |
203 |
206 |
209 |
210 |
211 |
214 | Sorry, this tab didn't load in time
215 |
216 |
217 | `;
218 |
--------------------------------------------------------------------------------
/PROJECT_ATTRIBUTION.md:
--------------------------------------------------------------------------------
1 | # 3rd-Party Software for [https://github.com/geometricpanda/geometricpanda]()
2 |
3 | The following 3rd-party software packages may be used by or distributed with **https://github.com/geometricpanda/geometricpanda**. This document was automatically generated by [FOSSA](https://fossa.com) on 01/28/21; any information relevant to third-party vendors listed below are collected using common, reasonable means.
4 |
5 |
6 |
7 |
8 |
9 |
10 | ## Direct Dependencies
11 |
12 |
13 | Package|Licenses
14 | -------|--------
15 | **[@storybook/addons (6.1.15)](#@storybook/addons-6-1-15)**|MIT
16 | **[@storybook/api (6.1.15)](#@storybook/api-6-1-15)**|MIT
17 | **[@storybook/components (6.1.15)](#@storybook/components-6-1-15)**|MIT
18 | **[@storybook/theming (6.1.15)](#@storybook/theming-6-1-15)**|MIT
19 | **[callsites (3.1.0)](#callsites-3-1-0)**|MIT
20 | **[color-name (1.1.3)](#color-name-1-1-3)**|MIT
21 | **[document-register-element (1.13.1)](#document-register-element-1-13-1)**|ISC, MIT
22 | **[function-bind (1.1.1)](#function-bind-1-1-1)**|MIT
23 | **[is-arrayish (0.2.1)](#is-arrayish-0-2-1)**|MIT
24 | **[react (17.0.1)](#react-17-0-1)**|MIT
25 | **[react-dom (17.0.1)](#react-dom-17-0-1)**|MIT
26 | **[react-is (17.0.1)](#react-is-17-0-1)**|MIT
27 | **[styled-components (5.2.1)](#styled-components-5-2-1)**|MIT
28 | **[tslib (2.1.0)](#tslib-2-1-0)**|MIT, BSD-2-Clause
29 |
30 |
31 |
32 | ### Details
33 |
34 |
35 | #### **@storybook/addons (6.1.15)**
36 |
37 |
38 | * Declared License(s)
39 | * MIT
40 | * Attribution:
41 | The MIT License (MIT)
42 |
43 | Copyright (c) 2017 Kadira Inc.
44 |
45 | Permission is hereby granted, free of charge, to any person obtaining a copy
46 | of this software and associated documentation files (the "Software"), to deal
47 | in the Software without restriction, including without limitation the rights
48 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
49 | copies of the Software, and to permit persons to whom the Software is
50 | furnished to do so, subject to the following conditions:
51 |
52 | The above copyright notice and this permission notice shall be included in
53 | all copies or substantial portions of the Software.
54 |
55 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
56 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
57 | FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
58 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
59 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
60 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
61 | THE SOFTWARE.
62 |
63 |
64 |
65 |
66 | * Discovered License(s)
67 |
68 |
69 |
70 |
71 |
72 |
73 | ---
74 | ---
75 |
76 | #### **@storybook/api (6.1.15)**
77 |
78 |
79 | * Declared License(s)
80 | * MIT
81 | * Attribution:
82 | The MIT License (MIT)
83 |
84 | Copyright (c) 2017 Kadira Inc.
85 |
86 | Permission is hereby granted, free of charge, to any person obtaining a copy
87 | of this software and associated documentation files (the "Software"), to deal
88 | in the Software without restriction, including without limitation the rights
89 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
90 | copies of the Software, and to permit persons to whom the Software is
91 | furnished to do so, subject to the following conditions:
92 |
93 | The above copyright notice and this permission notice shall be included in
94 | all copies or substantial portions of the Software.
95 |
96 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
97 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
98 | FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
99 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
100 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
101 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
102 | THE SOFTWARE.
103 |
104 |
105 |
106 |
107 | * Discovered License(s)
108 |
109 |
110 |
111 |
112 |
113 |
114 | ---
115 | ---
116 |
117 | #### **@storybook/components (6.1.15)**
118 |
119 |
120 | * Declared License(s)
121 | * MIT
122 | * Attribution:
123 | The MIT License (MIT)
124 |
125 | Copyright (c) 2017 Kadira Inc.
126 |
127 | Permission is hereby granted, free of charge, to any person obtaining a copy
128 | of this software and associated documentation files (the "Software"), to deal
129 | in the Software without restriction, including without limitation the rights
130 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
131 | copies of the Software, and to permit persons to whom the Software is
132 | furnished to do so, subject to the following conditions:
133 |
134 | The above copyright notice and this permission notice shall be included in
135 | all copies or substantial portions of the Software.
136 |
137 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
138 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
139 | FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
140 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
141 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
142 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
143 | THE SOFTWARE.
144 |
145 |
146 |
147 |
148 | * Discovered License(s)
149 |
150 |
151 |
152 |
153 |
154 |
155 | ---
156 | ---
157 |
158 | #### **@storybook/theming (6.1.15)**
159 |
160 |
161 | * Declared License(s)
162 | * MIT
163 | * Attribution:
164 | The MIT License (MIT)
165 |
166 | Copyright (c) 2017 Kadira Inc.
167 |
168 | Permission is hereby granted, free of charge, to any person obtaining a copy
169 | of this software and associated documentation files (the "Software"), to deal
170 | in the Software without restriction, including without limitation the rights
171 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
172 | copies of the Software, and to permit persons to whom the Software is
173 | furnished to do so, subject to the following conditions:
174 |
175 | The above copyright notice and this permission notice shall be included in
176 | all copies or substantial portions of the Software.
177 |
178 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
179 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
180 | FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
181 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
182 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
183 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
184 | THE SOFTWARE.
185 |
186 |
187 |
188 |
189 | * Discovered License(s)
190 |
191 |
192 |
193 |
194 |
195 |
196 | ---
197 | ---
198 |
199 | #### **callsites (3.1.0)**
200 |
201 |
202 | * Declared License(s)
203 | * MIT
204 | * Attribution:
205 | Copyright (c) Sindre Sorhus
206 | Permission is hereby granted, free of charge, to any person obtaining a copy
207 | of this software and associated documentation files (the "Software"), to deal
208 | in the Software without restriction, including without limitation the rights
209 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
210 | copies of the Software, and to permit persons to whom the Software is
211 | furnished to do so, subject to the following conditions:
212 |
213 | The above copyright notice and this permission notice shall be included in all
214 | copies or substantial portions of the Software.
215 |
216 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
217 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
218 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
219 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
220 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
221 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
222 | SOFTWARE.
223 |
224 |
225 |
226 | * Discovered License(s)
227 |
228 |
229 |
230 |
231 |
232 |
233 | ---
234 | ---
235 |
236 | #### **color-name (1.1.3)**
237 |
238 |
239 | * Declared License(s)
240 | * MIT
241 | * Attribution:
242 | The MIT License (MIT)
243 | Copyright (c) 2015 Dmitry Ivanov
244 |
245 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
246 |
247 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
248 |
249 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
250 |
251 |
252 |
253 | * Discovered License(s)
254 |
255 |
256 |
257 |
258 |
259 |
260 | ---
261 | ---
262 |
263 | #### **document-register-element (1.13.1)**
264 |
265 |
266 | * Declared License(s)
267 | * ISC
268 | * Attribution:
269 | Copyright (c) 2021, document-register-element Contributors
270 | Permission to use, copy, modify, and distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
271 | THE SOFTWARE IS PROVIDED "AS IS" AND ISC DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL ISC BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
272 | * MIT
273 | * Attribution:
274 | ISC License
275 |
276 | Copyright (c) 2014-2018, Andrea Giammarchi, @WebReflection
277 |
278 | Permission to use, copy, modify, and/or distribute this software for any
279 | purpose with or without fee is hereby granted, provided that the above
280 | copyright notice and this permission notice appear in all copies.
281 |
282 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
283 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
284 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
285 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
286 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
287 | OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
288 | PERFORMANCE OF THIS SOFTWARE.
289 |
290 |
291 |
292 |
293 | * Discovered License(s)
294 |
295 |
296 |
297 |
298 |
299 |
300 | ---
301 | ---
302 |
303 | #### **function-bind (1.1.1)**
304 |
305 |
306 | * Declared License(s)
307 | * MIT
308 | * Attribution:
309 | Copyright (c) 2013 Raynos.
310 |
311 | Permission is hereby granted, free of charge, to any person obtaining a copy
312 | of this software and associated documentation files (the "Software"), to deal
313 | in the Software without restriction, including without limitation the rights
314 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
315 | copies of the Software, and to permit persons to whom the Software is
316 | furnished to do so, subject to the following conditions:
317 |
318 | The above copyright notice and this permission notice shall be included in
319 | all copies or substantial portions of the Software.
320 |
321 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
322 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
323 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
324 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
325 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
326 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
327 | THE SOFTWARE.
328 |
329 |
330 |
331 |
332 |
333 | * Discovered License(s)
334 |
335 |
336 |
337 |
338 |
339 |
340 | ---
341 | ---
342 |
343 | #### **is-arrayish (0.2.1)**
344 |
345 |
346 | * Declared License(s)
347 | * MIT
348 | * Attribution:
349 | The MIT License (MIT)
350 |
351 | Copyright (c) 2015 JD Ballard
352 |
353 | Permission is hereby granted, free of charge, to any person obtaining a copy
354 | of this software and associated documentation files (the "Software"), to deal
355 | in the Software without restriction, including without limitation the rights
356 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
357 | copies of the Software, and to permit persons to whom the Software is
358 | furnished to do so, subject to the following conditions:
359 |
360 | The above copyright notice and this permission notice shall be included in
361 | all copies or substantial portions of the Software.
362 |
363 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
364 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
365 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
366 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
367 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
368 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
369 | THE SOFTWARE.
370 |
371 |
372 |
373 |
374 | * Discovered License(s)
375 |
376 |
377 |
378 |
379 |
380 |
381 | ---
382 | ---
383 |
384 | #### **react (17.0.1)**
385 |
386 |
387 | * Declared License(s)
388 | * MIT
389 | * Attribution:
390 | MIT License
391 |
392 | Copyright (c) Facebook, Inc. and its affiliates.
393 |
394 | Permission is hereby granted, free of charge, to any person obtaining a copy
395 | of this software and associated documentation files (the "Software"), to deal
396 | in the Software without restriction, including without limitation the rights
397 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
398 | copies of the Software, and to permit persons to whom the Software is
399 | furnished to do so, subject to the following conditions:
400 |
401 | The above copyright notice and this permission notice shall be included in all
402 | copies or substantial portions of the Software.
403 |
404 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
405 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
406 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
407 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
408 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
409 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
410 | SOFTWARE.
411 |
412 |
413 |
414 |
415 | * Discovered License(s)
416 |
417 |
418 |
419 |
420 |
421 |
422 | ---
423 | ---
424 |
425 | #### **react-dom (17.0.1)**
426 |
427 |
428 | * Declared License(s)
429 | * MIT
430 | * Attribution:
431 | MIT License
432 |
433 | Copyright (c) Facebook, Inc. and its affiliates.
434 |
435 | Permission is hereby granted, free of charge, to any person obtaining a copy
436 | of this software and associated documentation files (the "Software"), to deal
437 | in the Software without restriction, including without limitation the rights
438 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
439 | copies of the Software, and to permit persons to whom the Software is
440 | furnished to do so, subject to the following conditions:
441 |
442 | The above copyright notice and this permission notice shall be included in all
443 | copies or substantial portions of the Software.
444 |
445 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
446 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
447 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
448 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
449 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
450 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
451 | SOFTWARE.
452 |
453 |
454 |
455 |
456 | * Discovered License(s)
457 |
458 |
459 |
460 |
461 |
462 |
463 | ---
464 | ---
465 |
466 | #### **react-is (17.0.1)**
467 |
468 |
469 | * Declared License(s)
470 | * MIT
471 | * Attribution:
472 | MIT License
473 |
474 | Copyright (c) Facebook, Inc. and its affiliates.
475 |
476 | Permission is hereby granted, free of charge, to any person obtaining a copy
477 | of this software and associated documentation files (the "Software"), to deal
478 | in the Software without restriction, including without limitation the rights
479 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
480 | copies of the Software, and to permit persons to whom the Software is
481 | furnished to do so, subject to the following conditions:
482 |
483 | The above copyright notice and this permission notice shall be included in all
484 | copies or substantial portions of the Software.
485 |
486 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
487 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
488 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
489 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
490 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
491 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
492 | SOFTWARE.
493 |
494 |
495 |
496 |
497 | * Discovered License(s)
498 |
499 |
500 |
501 |
502 |
503 |
504 | ---
505 | ---
506 |
507 | #### **styled-components (5.2.1)**
508 |
509 |
510 | * Declared License(s)
511 | * MIT
512 | * Attribution:
513 | Copyright (c) 2016 Sultan Tarimo
514 | Permission is hereby granted, free of charge, to any person obtaining a copy
515 | of this software and associated documentation files (the "Software"), to deal
516 | in the Software without restriction, including without limitation the rights
517 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
518 | copies of the Software, and to permit persons to whom the Software is
519 | furnished to do so, subject to the following conditions:
520 |
521 | The above copyright notice and this permission notice shall be included in all
522 | copies or substantial portions of the Software.
523 |
524 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
525 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
526 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
527 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
528 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
529 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
530 | SOFTWARE.
531 |
532 |
533 |
534 | * Discovered License(s)
535 |
536 |
537 |
538 |
539 |
540 |
541 | ---
542 | ---
543 |
544 | #### **tslib (2.1.0)**
545 |
546 |
547 | * Declared License(s)
548 | * MIT
549 | * Attribution:
550 | Copyright (c) Microsoft Corporation.
551 |
552 | Permission to use, copy, modify, and/or distribute this software for any
553 | purpose with or without fee is hereby granted.
554 |
555 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
556 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
557 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
558 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
559 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
560 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
561 | PERFORMANCE OF THIS SOFTWARE.
562 | * BSD-2-Clause
563 | * Attribution:
564 | Copyright (c) 2021, tslib Contributors<>
565 | All rights reserved.<>
566 |
567 | Redistribution and use in source and binary forms, with or without
568 | modification, are permitted provided that the following conditions are met:
569 |
570 | 1. Redistributions of source code must retain the above copyright notice, this
571 | list of conditions and the following disclaimer.
572 |
573 | 2. Redistributions in binary form must reproduce the above copyright notice,
574 | this list of conditions and the following disclaimer in the documentation
575 |
576 | and/or other materials provided with the distribution.
577 |
578 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
579 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
580 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
581 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
582 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
583 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
584 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
585 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
586 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
587 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
588 |
589 |
590 |
591 | * Discovered License(s)
592 |
593 |
594 |
595 |
596 |
597 |
598 | ---
599 | ---
600 |
601 |
602 |
603 |
604 |
605 |
606 | ***Deep dependencies not included. Enable this in FOSSA to include deeper data.***
607 |
608 |
609 |
610 | ***Full license list not included. Enable this in FOSSA to include licenses.***
611 |
612 |
613 |
614 |
615 | [FOSSA]: # (Do not touch the comments below)
616 |
617 | [FOSSA]: # (==depsig=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855==)
618 |
619 |
620 |
--------------------------------------------------------------------------------