@popsure/dirty-swan 0.51.3 → 0.53.0

package/dist/esm/components/markdown/index.stories.js

@@ -1,61 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Markdown } from './index.js';
-import '../../tslib.es6-5bc94358.js';
-import '../../style-inject.es-1f59c1d0.js';
-import 'devlop';
-import 'vfile/do-not-use-conditional-minpath';
-import 'vfile/do-not-use-conditional-minproc';
-import 'vfile/do-not-use-conditional-minurl';
-import 'unist-util-visit-parents/do-not-use-color';
-import '../../_commonjsHelpers-e7f67fd8.js';
-
-var story = {
-    title: 'JSX/Markdown',
-    component: Markdown,
-    argTypes: {
-        children: {
-            description: 'MD content to be rendered in the component.',
-        },
-        className: {
-            description: 'This property allows to add custom styles to the component.',
-        },
-        renderRawMarkdownChild: {
-            description: 'This property allows to render the raw markdown child as a component.',
-        },
-        openLinksInNewTab: {
-            description: 'Wether link components rendered inside Markdown should open in a new tab (`target="_blank"`).',
-        },
-        styling: {
-            desription: 'This property allows to customize the styling of the markdown content.',
-        }
-    },
-    args: {
-        children: '## Title \n This is **our content**.',
-        className: '',
-        renderRawMarkdownChild: false,
-        openLinksInNewTab: false,
-        styling: {},
-    },
-    parameters: {
-        componentSubtitle: (jsxs(Fragment, { children: ["Display markdown text based on ", jsx("a", { href: "https://github.com/remarkjs/react-markdown", target: '_blank', rel: "noreferrer", children: "react-markdown" }), " with custom styling."] })),
-    },
-};
-var MarkdownStory = function (_a) {
-    var children = _a.children, className = _a.className;
-    return (jsx(Markdown, { className: className, children: children }));
-};
-MarkdownStory.storyName = "Markdown";
-var AvailableMDComponents = function (_a) {
-    var className = _a.className;
-    return (jsx(Markdown, { className: className, children: "\n## Headers\nThe header options range from h1 to h4.\n\n```\n# H1\n## H2\n### H3\n#### H4\n```\n\n# H1 Lorem ipsum non sunt qui sunt\n\n## H2 Lorem ipsum non sunt qui sunt\n\n### H3 Lorem ipsum non sunt qui sunt\n\n#### H4 Lorem ipsum non sunt qui sunt\n\n## Emphasis\n\n```\nEmphasis or italics, use *asterisk* or _underscore_.\nStrong emphasis or bold, use **asterisks** or __underscores__.\nCombined emphasis, use **_asterisks and underscores_**.\n```\n\nEmphasis or italics, use _asterisk_ or _underscore_.\n\nStrong emphasis or bold, use **asterisks** or **underscores**.\n\nCombined emphasis, use **_asterisks and underscores_**.\n\n## Lists\n\n```\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses\n```\n\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n- Unordered list can use asterisks\n- Or minuses\n- Or pluses\n\n## Links\n\nFor links markdown syntax should be used.\n\n```\n[This is an inline link](https://feather-insurance.com)\n```\n\n[This is an inline link](https://feather-insurance.com)\n\n## Inline code block\n\nInline code block can be set by using backtick or ```\n\n```\nIt is usefull to define a `variable` inside a text\n```\n\nIt is usefull to define a `variable` inside a text\n\n## Quote\n\nYou can use quote markdown by using `>` at the beginning of your text\n\n```\n> The busy man is least busy with living. - Seneca\n```\n\n> The busy man is least busy with living. - Seneca\n\n## Images\n\nImages markdown syntax is the following\n```\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n```\n\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n\n## Tables\n\nDefining a table in markdown is a bit tricky. You can use websites such as [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables) for help\n\n```\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k\u20AC        | `c`    |\n| Sales      | 200k\u20AC        | `e`    |\n| Product    | 84k\u20AC         | `f`    |\n```\n\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k\u20AC        | `c`    |\n| Sales      | 200k\u20AC        | `e`    |\n| Product    | 84k\u20AC         | `f`    |\n\n" }));
-};
-var AddingCustomComponents = function (_a) {
-    var className = _a.className, openLinksInNewTab = _a.openLinksInNewTab, renderRawMarkdownChild = _a.renderRawMarkdownChild;
-    return (jsx(Markdown, { className: className, openLinksInNewTab: openLinksInNewTab, styling: {
-            h6: 'tc-red-500'
-        }, renderRawMarkdownChild: renderRawMarkdownChild, children: "###### This is a custom H6 that will always be red" }));
-};
-
-export default story;
-export { AddingCustomComponents, AvailableMDComponents, MarkdownStory };
-//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/markdown/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/markdown/index.stories.tsx"],"sourcesContent":["import { render } from 'sass';\nimport { Markdown, MarkdownProps } from '.';\n\nconst story = {\n  title: 'JSX/Markdown',\n  component: Markdown,\n  argTypes: {\n    \n    children: {\n      description: 'MD content to be rendered in the component.',\n    },\n    className: {\n      description: 'This property allows to add custom styles to the component.',\n    },\n    renderRawMarkdownChild: {\n      description: 'This property allows to render the raw markdown child as a component.',\n    },\n    openLinksInNewTab: {\n      description: 'Wether link components rendered inside Markdown should open in a new tab (`target=\"_blank\"`).',\n    },\n    styling: {\n      desription: 'This property allows to customize the styling of the markdown content.',\n    }\n  },\n  args: {\n    children: '## Title \\n This is **our content**.',\n    className: '',\n    renderRawMarkdownChild: false,\n    openLinksInNewTab: false,\n    styling: {},\n  },\n  parameters: {\n    componentSubtitle: (\n      <>\n        Display markdown text based on <a href=\"https://github.com/remarkjs/react-markdown\" target='_blank' rel=\"noreferrer\">react-markdown</a> with custom styling.\n      </>\n    ),\n  },\n};\n\nexport const MarkdownStory = ({ children, className }: MarkdownProps) => (\n  <Markdown className={className}>\n    {children}\n  </Markdown>\n);\n\nMarkdownStory.storyName = \"Markdown\";\n\nexport const AvailableMDComponents = ({ className }: MarkdownProps) => (\n  <Markdown className={className}>\n    {`\n## Headers\nThe header options range from h1 to h4.\n\n\\`\\`\\`\n# H1\n## H2\n### H3\n#### H4\n\\`\\`\\`\n\n# H1 Lorem ipsum non sunt qui sunt\n\n## H2 Lorem ipsum non sunt qui sunt\n\n### H3 Lorem ipsum non sunt qui sunt\n\n#### H4 Lorem ipsum non sunt qui sunt\n\n## Emphasis\n\n\\`\\`\\`\nEmphasis or italics, use *asterisk* or _underscore_.\nStrong emphasis or bold, use **asterisks** or __underscores__.\nCombined emphasis, use **_asterisks and underscores_**.\n\\`\\`\\`\n\nEmphasis or italics, use _asterisk_ or _underscore_.\n\nStrong emphasis or bold, use **asterisks** or **underscores**.\n\nCombined emphasis, use **_asterisks and underscores_**.\n\n## Lists\n\n\\`\\`\\`\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses\n\\`\\`\\`\n\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n- Unordered list can use asterisks\n- Or minuses\n- Or pluses\n\n## Links\n\nFor links markdown syntax should be used.\n\n\\`\\`\\`\n[This is an inline link](https://feather-insurance.com)\n\\`\\`\\`\n\n[This is an inline link](https://feather-insurance.com)\n\n## Inline code block\n\nInline code block can be set by using backtick or \\`\\`\\`\n\n\\`\\`\\`\nIt is usefull to define a \\`variable\\` inside a text\n\\`\\`\\`\n\nIt is usefull to define a \\`variable\\` inside a text\n\n## Quote\n\nYou can use quote markdown by using \\`>\\` at the beginning of your text\n\n\\`\\`\\`\n> The busy man is least busy with living. - Seneca\n\\`\\`\\`\n\n> The busy man is least busy with living. - Seneca\n\n## Images\n\nImages markdown syntax is the following\n\\`\\`\\`\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n\\`\\`\\`\n\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n\n## Tables\n\nDefining a table in markdown is a bit tricky. You can use websites such as [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables) for help\n\n\\`\\`\\`\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k€        | \\`c\\`    |\n| Sales      | 200k€        | \\`e\\`    |\n| Product    | 84k€         | \\`f\\`    |\n\\`\\`\\`\n\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k€        | \\`c\\`    |\n| Sales      | 200k€        | \\`e\\`    |\n| Product    | 84k€         | \\`f\\`    |\n\n`}\n  </Markdown>\n);\n\nexport const AddingCustomComponents = ({ \n  className,\n  openLinksInNewTab,\n  renderRawMarkdownChild\n }: MarkdownProps) => (\n  <Markdown\n    className={className}\n    openLinksInNewTab={openLinksInNewTab}\n    styling={{\n      h6: 'tc-red-500'\n    }}\n    renderRawMarkdownChild={renderRawMarkdownChild}\n\n  >\n    ###### This is a custom H6 that will always be red\n  </Markdown>\n);\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QAER,QAAQ,EAAE;YACR,WAAW,EAAE,6CAA6C;SAC3D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,6DAA6D;SAC3E;QACD,sBAAsB,EAAE;YACtB,WAAW,EAAE,uEAAuE;SACrF;QACD,iBAAiB,EAAE;YACjB,WAAW,EAAE,+FAA+F;SAC7G;QACD,OAAO,EAAE;YACP,UAAU,EAAE,wEAAwE;SACrF;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,sCAAsC;QAChD,SAAS,EAAE,EAAE;QACb,sBAAsB,EAAE,KAAK;QAC7B,iBAAiB,EAAE,KAAK;QACxB,OAAO,EAAE,EAAE;KACZ;IACD,UAAU,EAAE;QACV,iBAAiB,GACfA,+DACiCC,WAAG,IAAI,EAAC,4CAA4C,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,+BAAmB,6BACtI,CACJ;KACF;EACD;IAEW,aAAa,GAAG,UAAC,EAAsC;QAApC,QAAQ,cAAA,EAAE,SAAS,eAAA;IAAsB,QACvEA,IAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,YAC3B,QAAQ,GACA;AAH4D,EAIvE;AAEF,aAAa,CAAC,SAAS,GAAG,UAAU,CAAC;IAExB,qBAAqB,GAAG,UAAC,EAA4B;QAA1B,SAAS,eAAA;IAAsB,QACrEA,IAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,YAC3B,4hFAgHJ,GACY;AAnH0D,EAoHrE;IAEW,sBAAsB,GAAG,UAAC,EAItB;QAHf,SAAS,eAAA,EACT,iBAAiB,uBAAA,EACjB,sBAAsB,4BAAA;IACF,QACpBA,IAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE;YACP,EAAE,EAAE,YAAY;SACjB,EACD,sBAAsB,EAAE,sBAAsB,mEAIrC;AAXS;;;;;"}

package/dist/esm/lib/components/markdown/config.d.ts

@@ -1,22 +0,0 @@
-export interface MarkdownStyling {
-    a: string;
-    p: string;
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h6: string;
-    ol: string;
-    ul: string;
-    strong: string;
-    em: string;
-    table: string;
-    th: string;
-    tr: string;
-    td: string;
-    blockquote: string;
-    code: string;
-    pre: string;
-}
-export declare const defaultStyling: MarkdownStyling;

package/dist/esm/lib/components/markdown/index.d.ts

@@ -1,10 +0,0 @@
-import { MarkdownStyling } from './config';
-export interface MarkdownProps {
-    children: string;
-    className?: string;
-    openLinksInNewTab?: boolean;
-    styling?: Partial<MarkdownStyling>;
-    renderRawMarkdownChild?: boolean;
-}
-declare const Markdown: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export { Markdown };

package/dist/esm/lib/components/markdown/index.stories.d.ts

@@ -1,39 +0,0 @@
-import { MarkdownProps } from '.';
-declare const story: {
-    title: string;
-    component: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-    argTypes: {
-        children: {
-            description: string;
-        };
-        className: {
-            description: string;
-        };
-        renderRawMarkdownChild: {
-            description: string;
-        };
-        openLinksInNewTab: {
-            description: string;
-        };
-        styling: {
-            desription: string;
-        };
-    };
-    args: {
-        children: string;
-        className: string;
-        renderRawMarkdownChild: boolean;
-        openLinksInNewTab: boolean;
-        styling: {};
-    };
-    parameters: {
-        componentSubtitle: JSX.Element;
-    };
-};
-export declare const MarkdownStory: {
-    ({ children, className }: MarkdownProps): JSX.Element;
-    storyName: string;
-};
-export declare const AvailableMDComponents: ({ className }: MarkdownProps) => JSX.Element;
-export declare const AddingCustomComponents: ({ className, openLinksInNewTab, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export default story;

package/src/lib/components/chip/index.mdx

@@ -1,95 +0,0 @@
-import { useState } from 'react';
-import { Meta } from '@storybook/blocks';
-
-import Chip from '.';
-import featherLogo from '../cards/icons/feather-logo.svg';
-
-<Meta title="JSX/Chip" />
-
-# Chip
-
-Chip component displays text and image (optional) of given values.
-
-The X button in the right calls the prop `onRemove` function to keep track of removed selected values.
-
-<iframe width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D245%253A42" allowFullScreen />
-
-## Example
-
-
-export const ChipStory = () => {
-  const values = [
-    { value: 'feather', leftIcon: featherLogo },
-    { value: 'feather2', leftIcon: featherLogo },
-    {
-      value: 'feather3',
-      leftIcon: featherLogo,
-    },
-    {
-      value: 'dirtyswan',
-      leftIcon: featherLogo,
-    },
-    {
-      value: 'test value',
-      leftIcon: featherLogo,
-    },
-  ];
-  const [selectedValues, setSelectedValues] = useState(values);
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-      {selectedValues.map((value) => (
-        <Chip
-          value={value}
-          onRemove={(value) => {
-            const newValues = [...selectedValues].filter(
-              (selectedValue) => selectedValue.value !== value.value
-            );
-            setSelectedValues(newValues);
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-
-<ChipStory />
-
-```typescript
-import React, { useState } from 'react';
-import { Chip } from '@popsure/dirty-swan';
-
-export default () => {
-  const values = [
-    { value: 'feather', leftIcon: featherLogo },
-    { value: 'feather2', leftIcon: featherLogo },
-    {
-      value: 'feather3',
-      leftIcon: featherLogo,
-    },
-    {
-      value: 'dirtyswan',
-      leftIcon: featherLogo,
-    },
-    {
-      value: 'test value',
-      leftIcon: featherLogo,
-    },
-  ];
-  const [selectedValues, setSelectedValues] = useState(values);
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-      {selectedValues.map((value) => (
-        <Chip
-          value={value}
-          onRemove={(value) => {
-            const newValues = [...selectedValues].filter(
-              (selectedValue) => selectedValue.value !== value.value
-            );
-            setSelectedValues(newValues);
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-```