react-pdf-builder
Version:
Build beautiful PDF documents in React.
98 lines (97 loc) • 2.71 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CSSTransformRotate = exports.Size300 = exports.CustomRadialGradient = exports.CustomLinearGradient = exports.RadialGradient = exports.LinearGradient = exports.Fill = exports.Stroke = exports.Basic = void 0;
const react_1 = __importDefault(require("react"));
const PDFStory_1 = require("../parts/PDFStory");
const SquareShape_1 = require("../../components/shapes/SquareShape");
const Gradients_1 = require("../../components/shapes/Gradients");
const StoryComponent = (props) => {
return (react_1.default.createElement(PDFStory_1.PDFStory, null,
react_1.default.createElement(SquareShape_1.SquareShape, Object.assign({}, props))));
};
// === Setup ===
const meta = {
title: 'Stories/Shape/Square', // <-- Set to your story title
component: StoryComponent,
parameters: {
options: { showPanel: false }, // Don't show addons panel
},
};
exports.default = meta;
// === Stories ===
exports.Basic = {
args: {},
};
exports.Stroke = {
args: {
size: 300,
rectProps: { stroke: 'red', strokeWidth: 15 },
},
};
exports.Fill = {
args: {
size: 300,
fill: 'red',
},
};
exports.LinearGradient = {
args: {
size: 300,
gradient: ['red', 'blue'],
gradientType: Gradients_1.GradientType.leftToRight,
},
};
exports.RadialGradient = {
args: {
size: 300,
gradient: ['red', 'blue'],
gradientType: Gradients_1.GradientType.radial,
},
};
exports.CustomLinearGradient = {
args: {
size: 300,
gradient: [
{ offset: '0%', stopColor: 'red', stopOpacity: 1 },
{ offset: '50%', stopColor: 'blue', stopOpacity: 1 },
{ offset: '100%', stopColor: 'green', stopOpacity: 1 },
],
linearGradientProps: {
x1: 0,
y1: 0.7,
x2: 1,
y2: 0.3,
},
},
};
exports.CustomRadialGradient = {
args: {
size: 300,
gradientType: Gradients_1.GradientType.radial,
gradient: [
{ offset: '0%', stopColor: 'red', stopOpacity: 1 },
{ offset: '100%', stopColor: 'blue', stopOpacity: 1 },
],
radialGradientProps: {
cx: 0.5,
cy: 0.5,
fx: 0.3,
fy: 0.3,
},
},
};
exports.Size300 = {
args: {
size: 300,
},
};
exports.CSSTransformRotate = {
args: {
style: {
transform: 'rotate(45deg)',
},
},
};