ndcloud-storybook 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -0
  2. package/dist/index.cjs +121 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +14 -0
  5. package/dist/index.d.ts +14 -0
  6. package/dist/index.js +115 -0
  7. package/dist/index.js.map +1 -0
  8. package/package.json +69 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # ndcloud-storybook
package/dist/index.cjs ADDED
@@ -0,0 +1,121 @@
1
+ 'use strict';
2
+
3
+ var react = require('@emotion/react');
4
+ var styled = require('@emotion/styled');
5
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
6
+
7
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
8
+
9
+ var styled__default = /*#__PURE__*/_interopDefault(styled);
10
+
11
+ // src/atoms/Button/Button.tsx
12
+ var spin = react.keyframes`
13
+ from { transform: rotate(0deg); }
14
+ to { transform: rotate(360deg); }
15
+ `;
16
+ var Wrapper = styled__default.default.div`
17
+ display: inline-flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+
21
+ svg {
22
+ width: ${({ size = 20 }) => size}px;
23
+ height: ${({ size = 20 }) => size}px;
24
+ animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
25
+ transform-origin: center;
26
+ }
27
+ `;
28
+ var Spinner = ({
29
+ size = 20,
30
+ speed = "0.75s",
31
+ bgColor = "#D1D5DB",
32
+ fgColor = "#FFFFFF"
33
+ }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { size, speed, children: /* @__PURE__ */ jsxRuntime.jsxs(
34
+ "svg",
35
+ {
36
+ viewBox: "0 0 50 50",
37
+ fill: "none",
38
+ xmlns: "http://www.w3.org/2000/svg",
39
+ role: "status",
40
+ "aria-label": "loading",
41
+ children: [
42
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "25", cy: "25", r: "20", stroke: bgColor, strokeWidth: "5" }),
43
+ /* @__PURE__ */ jsxRuntime.jsx(
44
+ "path",
45
+ {
46
+ d: "M45 25a20 20 0 0 1-20 20",
47
+ stroke: fgColor,
48
+ strokeWidth: "5",
49
+ strokeLinecap: "round"
50
+ }
51
+ )
52
+ ]
53
+ }
54
+ ) });
55
+ var Spinner_default = Spinner;
56
+ var VARIANTS = {
57
+ primary: {
58
+ background: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)",
59
+ color: "#FFF"
60
+ },
61
+ secondary: {
62
+ background: "#6D65DA",
63
+ color: "#FFF"
64
+ },
65
+ outline: {
66
+ background: "transparent",
67
+ border: "1px solid rgba(70, 70, 74, 0.10)",
68
+ color: "#0E1116D9"
69
+ }
70
+ };
71
+ var StyledButton = styled__default.default.button`
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ padding: 12px 20px;
76
+ border-radius: 100px;
77
+ font-weight: 500;
78
+ font-family: "ABCFavoritExtended", sans-serif;
79
+ transition: all 0.2s ease;
80
+ width: 100%;
81
+ max-width: 336px;
82
+
83
+ span {
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ margin-right: 8px;
88
+ }
89
+
90
+ ${({ variant = "primary", disabled, selected }) => {
91
+ const { background, color, border } = VARIANTS[variant];
92
+ return react.css`
93
+ background: ${background};
94
+ border: ${selected ? "2px solid #FFF" : border || "none"};
95
+ color: ${color || "#FFF"};
96
+ opacity: ${disabled ? 0.5 : 1};
97
+ cursor: ${disabled ? "not-allowed" : "pointer"};
98
+ pointer-events: ${disabled ? "none" : "auto"};
99
+
100
+ &:focus-visible {
101
+ outline: 2px solid #0070f3;
102
+ outline-offset: 2px;
103
+ }
104
+ `;
105
+ }}
106
+ `;
107
+ var Button = ({
108
+ label,
109
+ icon,
110
+ loading,
111
+ disabled,
112
+ ...rest
113
+ }) => /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { label: "", disabled: disabled || loading, ...rest, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
114
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
115
+ label
116
+ ] }) });
117
+ var Button_default = Button;
118
+
119
+ exports.Button = Button_default;
120
+ //# sourceMappingURL=index.cjs.map
121
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/Spinner/Spinner.tsx","../src/atoms/Button/Button.tsx"],"names":["keyframes","styled","jsx","jsxs","css","Fragment"],"mappings":"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","file":"index.cjs","sourcesContent":["/** @jsxImportSource @emotion/react */\nimport React from \"react\";\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\ninterface SpinnerProps {\n size?: number;\n speed?: string;\n bgColor?: string;\n fgColor?: string;\n}\n\nconst spin = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\n\nconst Wrapper = styled.div<SpinnerProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: ${({ size = 20 }) => size}px;\n height: ${({ size = 20 }) => size}px;\n animation: ${spin} ${({ speed = \"0.75s\" }) => speed} linear infinite;\n transform-origin: center;\n }\n`;\n\nconst Spinner: React.FC<SpinnerProps> = ({\n size = 20,\n speed = \"0.75s\",\n bgColor = \"#D1D5DB\",\n fgColor = \"#FFFFFF\",\n}) => (\n <Wrapper size={size} speed={speed}>\n <svg\n viewBox=\"0 0 50 50\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"status\"\n aria-label=\"loading\"\n >\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke={bgColor} strokeWidth=\"5\" />\n <path\n d=\"M45 25a20 20 0 0 1-20 20\"\n stroke={fgColor}\n strokeWidth=\"5\"\n strokeLinecap=\"round\"\n />\n </svg>\n </Wrapper>\n);\n\nexport default Spinner;\n","/** @jsxImportSource @emotion/react */\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { ReactNode } from \"react\";\nimport Spinner from \"../Spinner/Spinner\";\n\ntype VariantName = \"primary\" | \"secondary\" | \"outline\";\n\ninterface VariantStyle {\n background: string;\n color?: string;\n border?: string;\n}\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n label: string;\n variant?: VariantName;\n disabled?: boolean;\n selected?: boolean;\n icon?: ReactNode;\n loading?: boolean;\n}\n\nconst VARIANTS: Record<VariantName, VariantStyle> = {\n primary: {\n background: \"linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)\",\n color: \"#FFF\",\n },\n secondary: {\n background: \"#6D65DA\",\n color: \"#FFF\",\n },\n outline: {\n background: \"transparent\",\n border: \"1px solid rgba(70, 70, 74, 0.10)\",\n\n color: \"#0E1116D9\",\n },\n};\n\nconst StyledButton = styled.button<ButtonProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 20px;\n border-radius: 100px;\n font-weight: 500;\n font-family: \"ABCFavoritExtended\", sans-serif;\n transition: all 0.2s ease;\n width: 100%;\n max-width: 336px;\n\n span {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 8px;\n }\n\n ${({ variant = \"primary\", disabled, selected }) => {\n const { background, color, border } = VARIANTS[variant];\n return css`\n background: ${background};\n border: ${selected ? \"2px solid #FFF\" : border || \"none\"};\n color: ${color || \"#FFF\"};\n opacity: ${disabled ? 0.5 : 1};\n cursor: ${disabled ? \"not-allowed\" : \"pointer\"};\n pointer-events: ${disabled ? \"none\" : \"auto\"};\n\n &:focus-visible {\n outline: 2px solid #0070f3;\n outline-offset: 2px;\n }\n `;\n }}\n`;\n\nconst Button: React.FC<ButtonProps> = ({\n label,\n icon,\n loading,\n disabled,\n ...rest\n}) => (\n <StyledButton label={\"\"} disabled={disabled || loading} {...rest}>\n {loading ? (\n <Spinner />\n ) : (\n <>\n {icon && <span>{icon}</span>}\n {label}\n </>\n )}\n </StyledButton>\n);\n\nexport default Button;\n"]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,14 @@
1
+ import React, { ReactNode } from 'react';
2
+
3
+ type VariantName = "primary" | "secondary" | "outline";
4
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
5
+ label: string;
6
+ variant?: VariantName;
7
+ disabled?: boolean;
8
+ selected?: boolean;
9
+ icon?: ReactNode;
10
+ loading?: boolean;
11
+ }
12
+ declare const Button: React.FC<ButtonProps>;
13
+
14
+ export { Button };
package/dist/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React, { ReactNode } from 'react';
2
+
3
+ type VariantName = "primary" | "secondary" | "outline";
4
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
5
+ label: string;
6
+ variant?: VariantName;
7
+ disabled?: boolean;
8
+ selected?: boolean;
9
+ icon?: ReactNode;
10
+ loading?: boolean;
11
+ }
12
+ declare const Button: React.FC<ButtonProps>;
13
+
14
+ export { Button };
package/dist/index.js ADDED
@@ -0,0 +1,115 @@
1
+ import { keyframes, css } from '@emotion/react';
2
+ import styled from '@emotion/styled';
3
+ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
4
+
5
+ // src/atoms/Button/Button.tsx
6
+ var spin = keyframes`
7
+ from { transform: rotate(0deg); }
8
+ to { transform: rotate(360deg); }
9
+ `;
10
+ var Wrapper = styled.div`
11
+ display: inline-flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+
15
+ svg {
16
+ width: ${({ size = 20 }) => size}px;
17
+ height: ${({ size = 20 }) => size}px;
18
+ animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
19
+ transform-origin: center;
20
+ }
21
+ `;
22
+ var Spinner = ({
23
+ size = 20,
24
+ speed = "0.75s",
25
+ bgColor = "#D1D5DB",
26
+ fgColor = "#FFFFFF"
27
+ }) => /* @__PURE__ */ jsx(Wrapper, { size, speed, children: /* @__PURE__ */ jsxs(
28
+ "svg",
29
+ {
30
+ viewBox: "0 0 50 50",
31
+ fill: "none",
32
+ xmlns: "http://www.w3.org/2000/svg",
33
+ role: "status",
34
+ "aria-label": "loading",
35
+ children: [
36
+ /* @__PURE__ */ jsx("circle", { cx: "25", cy: "25", r: "20", stroke: bgColor, strokeWidth: "5" }),
37
+ /* @__PURE__ */ jsx(
38
+ "path",
39
+ {
40
+ d: "M45 25a20 20 0 0 1-20 20",
41
+ stroke: fgColor,
42
+ strokeWidth: "5",
43
+ strokeLinecap: "round"
44
+ }
45
+ )
46
+ ]
47
+ }
48
+ ) });
49
+ var Spinner_default = Spinner;
50
+ var VARIANTS = {
51
+ primary: {
52
+ background: "linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)",
53
+ color: "#FFF"
54
+ },
55
+ secondary: {
56
+ background: "#6D65DA",
57
+ color: "#FFF"
58
+ },
59
+ outline: {
60
+ background: "transparent",
61
+ border: "1px solid rgba(70, 70, 74, 0.10)",
62
+ color: "#0E1116D9"
63
+ }
64
+ };
65
+ var StyledButton = styled.button`
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ padding: 12px 20px;
70
+ border-radius: 100px;
71
+ font-weight: 500;
72
+ font-family: "ABCFavoritExtended", sans-serif;
73
+ transition: all 0.2s ease;
74
+ width: 100%;
75
+ max-width: 336px;
76
+
77
+ span {
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ margin-right: 8px;
82
+ }
83
+
84
+ ${({ variant = "primary", disabled, selected }) => {
85
+ const { background, color, border } = VARIANTS[variant];
86
+ return css`
87
+ background: ${background};
88
+ border: ${selected ? "2px solid #FFF" : border || "none"};
89
+ color: ${color || "#FFF"};
90
+ opacity: ${disabled ? 0.5 : 1};
91
+ cursor: ${disabled ? "not-allowed" : "pointer"};
92
+ pointer-events: ${disabled ? "none" : "auto"};
93
+
94
+ &:focus-visible {
95
+ outline: 2px solid #0070f3;
96
+ outline-offset: 2px;
97
+ }
98
+ `;
99
+ }}
100
+ `;
101
+ var Button = ({
102
+ label,
103
+ icon,
104
+ loading,
105
+ disabled,
106
+ ...rest
107
+ }) => /* @__PURE__ */ jsx(StyledButton, { label: "", disabled: disabled || loading, ...rest, children: loading ? /* @__PURE__ */ jsx(Spinner_default, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
108
+ icon && /* @__PURE__ */ jsx("span", { children: icon }),
109
+ label
110
+ ] }) });
111
+ var Button_default = Button;
112
+
113
+ export { Button_default as Button };
114
+ //# sourceMappingURL=index.js.map
115
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/Spinner/Spinner.tsx","../src/atoms/Button/Button.tsx"],"names":["styled","jsx","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["/** @jsxImportSource @emotion/react */\nimport React from \"react\";\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\ninterface SpinnerProps {\n size?: number;\n speed?: string;\n bgColor?: string;\n fgColor?: string;\n}\n\nconst spin = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\n\nconst Wrapper = styled.div<SpinnerProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: ${({ size = 20 }) => size}px;\n height: ${({ size = 20 }) => size}px;\n animation: ${spin} ${({ speed = \"0.75s\" }) => speed} linear infinite;\n transform-origin: center;\n }\n`;\n\nconst Spinner: React.FC<SpinnerProps> = ({\n size = 20,\n speed = \"0.75s\",\n bgColor = \"#D1D5DB\",\n fgColor = \"#FFFFFF\",\n}) => (\n <Wrapper size={size} speed={speed}>\n <svg\n viewBox=\"0 0 50 50\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"status\"\n aria-label=\"loading\"\n >\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke={bgColor} strokeWidth=\"5\" />\n <path\n d=\"M45 25a20 20 0 0 1-20 20\"\n stroke={fgColor}\n strokeWidth=\"5\"\n strokeLinecap=\"round\"\n />\n </svg>\n </Wrapper>\n);\n\nexport default Spinner;\n","/** @jsxImportSource @emotion/react */\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { ReactNode } from \"react\";\nimport Spinner from \"../Spinner/Spinner\";\n\ntype VariantName = \"primary\" | \"secondary\" | \"outline\";\n\ninterface VariantStyle {\n background: string;\n color?: string;\n border?: string;\n}\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n label: string;\n variant?: VariantName;\n disabled?: boolean;\n selected?: boolean;\n icon?: ReactNode;\n loading?: boolean;\n}\n\nconst VARIANTS: Record<VariantName, VariantStyle> = {\n primary: {\n background: \"linear-gradient(90deg, #6D65DA 0.08%, #55A3BD 68.44%)\",\n color: \"#FFF\",\n },\n secondary: {\n background: \"#6D65DA\",\n color: \"#FFF\",\n },\n outline: {\n background: \"transparent\",\n border: \"1px solid rgba(70, 70, 74, 0.10)\",\n\n color: \"#0E1116D9\",\n },\n};\n\nconst StyledButton = styled.button<ButtonProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 20px;\n border-radius: 100px;\n font-weight: 500;\n font-family: \"ABCFavoritExtended\", sans-serif;\n transition: all 0.2s ease;\n width: 100%;\n max-width: 336px;\n\n span {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 8px;\n }\n\n ${({ variant = \"primary\", disabled, selected }) => {\n const { background, color, border } = VARIANTS[variant];\n return css`\n background: ${background};\n border: ${selected ? \"2px solid #FFF\" : border || \"none\"};\n color: ${color || \"#FFF\"};\n opacity: ${disabled ? 0.5 : 1};\n cursor: ${disabled ? \"not-allowed\" : \"pointer\"};\n pointer-events: ${disabled ? \"none\" : \"auto\"};\n\n &:focus-visible {\n outline: 2px solid #0070f3;\n outline-offset: 2px;\n }\n `;\n }}\n`;\n\nconst Button: React.FC<ButtonProps> = ({\n label,\n icon,\n loading,\n disabled,\n ...rest\n}) => (\n <StyledButton label={\"\"} disabled={disabled || loading} {...rest}>\n {loading ? (\n <Spinner />\n ) : (\n <>\n {icon && <span>{icon}</span>}\n {label}\n </>\n )}\n </StyledButton>\n);\n\nexport default Button;\n"]}
package/package.json ADDED
@@ -0,0 +1,69 @@
1
+ {
2
+ "name": "ndcloud-storybook",
3
+ "version": "1.0.0",
4
+ "description": "",
5
+ "license": "ISC",
6
+ "type": "module",
7
+ "main": "./dist/index.cjs",
8
+ "module": "./dist/index.js",
9
+ "types": "./dist/index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/index.d.ts",
13
+ "import": "./dist/index.js",
14
+ "require": "./dist/index.cjs"
15
+ },
16
+ "./*": "./dist/*"
17
+ },
18
+ "files": ["dist"],
19
+ "sideEffects": false,
20
+ "scripts": {
21
+ "build": "tsup --tsconfig tsconfig.build.json",
22
+ "dev": "tsup --watch --tsconfig tsconfig.build.json",
23
+ "clean": "rimraf dist",
24
+ "prepublishOnly": "npm run build",
25
+ "storybook": "storybook dev -p 6006",
26
+ "build-storybook": "storybook build",
27
+ "test": "echo \"Error: no test specified\" && exit 1",
28
+
29
+ "release:patch": "git pull --rebase && npm ci && npm run build && npm version patch -m \"chore(release): %s\" && npm publish --access public && git push && git push --tags",
30
+ "release:minor": "git pull --rebase && npm ci && npm run build && npm version minor -m \"chore(release): %s\" && npm publish --access public && git push && git push --tags",
31
+ "release:major": "git pull --rebase && npm ci && npm run build && npm version major -m \"chore(release): %s\" && npm publish --access public && git push && git push --tags"
32
+
33
+ },
34
+ "peerDependencies": {
35
+ "react": ">=18",
36
+ "react-dom": ">=18",
37
+ "@emotion/react": "^11",
38
+ "@emotion/styled": "^11"
39
+ },
40
+ "devDependencies": {
41
+ "@chromatic-com/storybook": "^4.1.1",
42
+ "@emotion/react": "^11.14.0",
43
+ "@emotion/styled": "^11.14.1",
44
+ "@storybook/addon-a11y": "^9.1.15",
45
+ "@storybook/addon-docs": "^9.1.13",
46
+ "@storybook/react-vite": "^9.1.13",
47
+ "@types/node": "^24.9.1",
48
+ "@types/react": "^19.2.2",
49
+ "@types/react-dom": "^19.2.2",
50
+ "@vitejs/plugin-react": "^5.1.0",
51
+ "prop-types": "^15.8.1",
52
+ "rimraf": "^6.1.0",
53
+ "storybook": "^9.1.13",
54
+ "tsup": "^8.5.0",
55
+ "typescript": "^5.9.3",
56
+ "vite-plugin-svgr": "^4.5.0"
57
+ },
58
+ "repository": {
59
+ "type": "git",
60
+ "url": "git+https://github.com/Northern-Data-AG/ndcloud-storybook.git"
61
+ },
62
+ "bugs": {
63
+ "url": "https://github.com/Northern-Data-AG/ndcloud-storybook/issues"
64
+ },
65
+ "homepage": "https://github.com/Northern-Data-AG/ndcloud-storybook#readme",
66
+ "publishConfig": {
67
+ "access": "public"
68
+ }
69
+ }