@soul-refiner/design-system 0.1.28 → 0.1.30

package/dist/components/card/card.stories.js

@@ -0,0 +1,284 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Card } from './card';
+import { Avatar, Box, Button, H, P } from 'components';
+import { Calendar, Clock, ForwardBold, GraduationCap, Play, Plus } from 'icons';
+/************************************************************************
+ * Global config
+ */
+const meta = {
+    title: 'Cards/Card',
+    parameters: {
+        layout: 'centered',
+    },
+};
+/************************************************************************
+ * Example styled components
+ */
+const Logo = styled.img `
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+`;
+const IconButton = styled.button `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  outline: none;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  padding: 0px;
+  margin: 0px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+`;
+/************************************************************************
+ * Story function
+ */
+const Story = (args) => React.createElement(Card, { ...args });
+/************************************************************************
+ * Pages
+ */
+export const Action = Story.bind({});
+Action.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+};
+Action.args = {
+    type: 'action',
+    editable: true,
+    href: '#',
+    actions: (React.createElement(Button, { size: "small", sx: "flex:1;" }, "Button")),
+    content: 'A group about the freedom we have in Christ. This is a short description about this group',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Logo, { src: "https://f005.backblazeb2.com/file/sr-platform/logo.png", alt: "" })),
+    subtitle: '14 connections in common',
+    sx: 'width: 310px',
+    title: 'Card Label',
+};
+export const AudioEpisode = Story.bind({});
+AudioEpisode.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    cta: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+    rating: {
+        type: 'number',
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+};
+AudioEpisode.args = {
+    type: 'audio-episode',
+    actions: [
+        React.createElement(IconButton, null,
+            React.createElement(Play, null)),
+        React.createElement(IconButton, null,
+            React.createElement(Plus, null)),
+        React.createElement(IconButton, null,
+            React.createElement(ForwardBold, null)),
+    ],
+    content: 'The Conquer Series, unrivaled in its scope and authority, lays out the process to permanently stop watching porn with proven strategies and tools that have helped thousands and lorem ipsum il dunc morem estem link',
+    cta: (React.createElement(Box, { "$dir": "column" },
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Watch with Soul Refiner"),
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Rent $129"))),
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Avatar, { as: "div", image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 })),
+    numRating: 15,
+    rating: 66,
+    subtitle: '6 ep',
+    supportLabel: 'Text',
+    title: 'Legacy',
+};
+export const Feature = Story.bind({});
+Feature.argTypes = {
+    uploadModal: {
+        control: 'none',
+    },
+};
+Feature.args = {
+    type: 'feature',
+    content: 'A group about the freedom we have in Christ. This is a short description about this group',
+    editable: true,
+    href: '#',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    // eslint-disable-next-line
+    onSave: (title, content) => undefined,
+    sx: '',
+    title: 'Card Label',
+    uploadModal: React.createElement(React.Fragment, null),
+};
+export const Person = Story.bind({});
+Person.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    uploadModal: {
+        control: 'none',
+    },
+};
+Person.args = {
+    type: 'person',
+    actions: [
+        React.createElement(Button, { size: "small", sx: "flex:1;", type: "secondary" }, "Button"),
+        React.createElement(Button, { size: "small", sx: "flex:1;" }, "Button"),
+    ],
+    content: 'A group about the freedom we have in Christ. This is a short description about this group',
+    editable: true,
+    href: '#',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    // eslint-disable-next-line
+    onSave: (title, content) => undefined,
+    subtitle: '14 connections in common',
+    sx: '',
+    title: 'Card Label',
+    uploadModal: React.createElement(React.Fragment, null),
+};
+export const Price = Story.bind({});
+Price.argTypes = {
+    actions: {
+        control: 'none',
+    },
+};
+Price.args = {
+    type: 'price',
+    actions: (React.createElement(Button, { size: "small", sx: "flex:1;" }, "Button")),
+    content: 'Credibly reintermediate client focused growth strategies with functional initiatives.',
+    featureTitle: 'Title',
+    features: [
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+    ],
+    price: '$15.00',
+    title: 'Pro',
+};
+export const Regular = Story.bind({});
+Regular.argTypes = {
+    children: {
+        control: 'none',
+    },
+};
+Regular.args = {
+    type: 'regular',
+    children: (React.createElement(React.Fragment, null,
+        React.createElement(H.Six, { "$textAlign": "center" }, "Card Label"),
+        React.createElement(Box, { "$dir": "column", "$gap": 8 },
+            React.createElement(Box, { "$align": "center", "$gap": 8 },
+                React.createElement(GraduationCap, null),
+                React.createElement(P, null, "911 People responded")),
+            React.createElement(Box, { "$align": "center", "$gap": 8 },
+                React.createElement(Calendar, null),
+                React.createElement(P, null, "911 People responded")),
+            React.createElement(Box, { "$align": "center", "$gap": 8 },
+                React.createElement(Clock, null),
+                React.createElement(P, null, "911 People responded"))))),
+    href: '#',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    sx: 'width: 352px;',
+};
+export const VideoEpisode = Story.bind({});
+VideoEpisode.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    cta: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+    rating: {
+        type: 'number',
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+};
+VideoEpisode.args = {
+    actions: [
+        React.createElement(IconButton, null,
+            React.createElement(Play, null)),
+        React.createElement(IconButton, null,
+            React.createElement(Plus, null)),
+        React.createElement(IconButton, null,
+            React.createElement(ForwardBold, null)),
+    ],
+    content: 'The Conquer Series, unrivaled in its scope and authority, lays out the process to permanently stop watching porn with proven strategies and tools that have helped thousands and lorem ipsum il dunc morem estem link',
+    cta: (React.createElement(Box, { "$dir": "row", "$justify": "space-between", sx: "width: 100%;" },
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Watch with Soul Refiner"),
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Rent $129"))),
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Avatar, { as: "div", image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 })),
+    numRating: 15,
+    rating: 66,
+    subtitle: 'by Soul Refiner',
+    supportLabel: '6 episodes',
+    title: 'Warpath',
+    type: 'video-episode',
+};
+export const WrittenEpisode = Story.bind({});
+WrittenEpisode.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    cta: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+    rating: {
+        type: 'number',
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+};
+WrittenEpisode.args = {
+    type: 'written-episode',
+    actions: [
+        React.createElement(IconButton, null,
+            React.createElement(Play, null)),
+        React.createElement(IconButton, null,
+            React.createElement(Plus, null)),
+        React.createElement(IconButton, null,
+            React.createElement(ForwardBold, null)),
+    ],
+    content: 'The Conquer Series, unrivaled in its scope and authority, lays out the process to permanently stop watching porn with proven strategies and tools that have helped thousands and lorem ipsum il dunc morem estem link',
+    cta: (React.createElement(Box, { "$dir": "column" },
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Watch with Soul Refiner"),
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Rent $129"))),
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Avatar, { as: "div", image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 })),
+    numRating: 15,
+    rating: 66,
+    subtitle: '6 ep',
+    supportLabel: 'Text',
+    title: 'Legacy',
+};
+export default meta;

package/dist/components/card/feature/feature.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface FeatureCardProps {
+    content: string;
+    editable?: boolean;
+    href?: string;
+    image: string;
+    onSave?: (title: string, content: string) => void;
+    sx?: string;
+    title: string;
+    uploadModal?: React.ReactElement;
+}
+export declare const FeatureCard: ({ content, editable, href, image, onSave, sx, title, uploadModal, }: FeatureCardProps) => React.JSX.Element;

package/dist/components/card/feature/feature.js

@@ -0,0 +1,168 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, Button, Modal } from 'components';
+import { Camera, Checkmark, Close, Pencil } from 'icons';
+export const FeatureCard = ({ content = '', editable, href, image, onSave, sx, title = '', uploadModal, }) => {
+    const [editing, setEditing] = React.useState(false);
+    const [editingTitle, setTitle] = React.useState(() => title);
+    const [editingContent, setContent] = React.useState(() => content);
+    const handleSetEditing = () => setEditing(true);
+    const handleCancelEdit = () => {
+        setTitle(title);
+        setContent(content);
+        setEditing(false);
+    };
+    const handleSave = () => {
+        setEditing(false);
+        onSave && onSave(editingTitle, editingContent);
+    };
+    const handleTitleChange = (event) => {
+        setTitle(event.target.value);
+    };
+    const handleContentChange = (event) => {
+        setContent(event.target.value);
+    };
+    const showEditIcon = !editing && editable;
+    const isLink = !!href;
+    return (React.createElement(Wrapper, { as: isLink ? 'div' : 'a', href: href },
+        React.createElement(Figure, { "$editing": editing, "$isLink": isLink, "$sx": sx },
+            React.createElement("img", { alt: title, src: image }),
+            !editing && (React.createElement(Title, null,
+                editingTitle,
+                React.createElement("figure", null,
+                    React.createElement(Content, null, editingContent)),
+                showEditIcon && (React.createElement(Pencil, { className: "edit", onClick: handleSetEditing })),
+                editable && uploadModal && (React.createElement(Modal, null,
+                    React.createElement(Modal.Trigger, null,
+                        React.createElement(Button, { icon: React.createElement(Camera, null), type: "outlined", size: "small", sx: "position: absolute; right: 8px; top: -72px;" }, "Edit")),
+                    React.createElement(Modal.Content, null, uploadModal))))),
+            editing && (React.createElement(Box, { "$align": "flex-end", "$display": "flex", "$dir": "column", "$gap": 8, sx: "position: relative;" },
+                React.createElement(EditTitle, { onChange: handleTitleChange, value: editingTitle }),
+                React.createElement(EditContent, { onChange: handleContentChange, value: editingContent }),
+                React.createElement(Box, { "$gap": 8 },
+                    React.createElement(Checkmark, { onClick: handleSave, sx: `
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                ` }),
+                    React.createElement(Close, { onClick: handleCancelEdit, sx: `
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                ` })))))));
+};
+const Wrapper = styled.div `
+  text-decoration: none;
+`;
+const Figure = styled.figure `
+  max-width: 352px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 16px;
+  padding: 16px;
+  margin: 0px;
+  border-radius: 16px;
+  box-shadow: var(--elevation-1);
+  border: 1px solid var(--color-white);
+
+  &:hover {
+    ${({ $isLink }) => $isLink
+    ? 'border: 1px solid var(--color-primary-blue-3); cursor: pointer;'
+    : 'cursor: arrow;'}
+
+    button {
+      display: flex;
+    }
+
+    .edit {
+      display: block;
+    }
+  }
+
+  img {
+    max-width: 352px;
+    aspect-ratio: 1/1;
+  }
+
+  figure {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 4px;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  button {
+    display: none;
+  }
+
+  .edit {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    display: none;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+  }
+
+  ${({ $editing }) => $editing
+    ? `
+    background-color: var(--color-grey-9);`
+    : `
+    background-color: var(--color-white);`}
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Title = styled.figcaption `
+  position: relative;
+  padding-right: 32px;
+  color: var(--color-grey-2);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  user-select: none;
+`;
+const Content = styled.figcaption `
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;
+const EditTitle = styled.input `
+  width: calc(100% - 24px);
+  padding: 12px;
+  background-color: var(--color-white);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+`;
+const EditContent = styled(EditTitle) `
+  padding: 6px 12px;
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;

package/dist/components/card/feature/index.d.ts

@@ -0,0 +1,2 @@
+export { FeatureCard } from './feature';
+export type { FeatureCardProps } from './feature';

package/dist/components/card/feature/index.js

@@ -0,0 +1 @@
+export { FeatureCard } from './feature';

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './card';
+export type { CardProps } from './card';

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card } from './card';

package/dist/components/card/person/index.d.ts

@@ -0,0 +1,2 @@
+export { PersonCard } from './person';
+export type { PersonCardProps } from './person';

package/dist/components/card/person/index.js

@@ -0,0 +1 @@
+export { PersonCard } from './person';

package/dist/components/card/person/person.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PersonCardProps {
+    actions?: React.ReactElement | React.ReactElement[];
+    href: string;
+    image: string;
+    subtitle: string;
+    sx?: string;
+    title: string;
+}
+export declare const PersonCard: ({ actions, href, image, subtitle, sx, title, }: PersonCardProps) => React.JSX.Element;

package/dist/components/card/person/person.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+export const PersonCard = ({ actions, href, image, subtitle, sx, title, }) => {
+    return (React.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div' },
+        React.createElement(Person, { "$sx": sx },
+            React.createElement(Shadow, null,
+                React.createElement("img", { src: image, alt: "" })),
+            React.createElement(Figcaption, null,
+                React.createElement(H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),
+                React.createElement(P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
+                actions && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 16px;" }, React.Children.toArray(actions)))))));
+};
+const Wrapper = styled.div `
+  width: 312px;
+  height: 400px;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+  }
+`;
+const Shadow = styled.div `
+  border-radius: 16px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
+    transparent 50% / cover no-repeat;
+`;
+const Person = styled.figure `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Figcaption = styled.figcaption `
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+`;

package/dist/components/card/price/index.d.ts

@@ -0,0 +1,2 @@
+export { PriceCard } from './price';
+export type { PriceCardProps } from './price';

package/dist/components/card/price/index.js

@@ -0,0 +1 @@
+export { PriceCard } from './price';

package/dist/components/card/price/price.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PriceCardProps {
+    actions: React.ReactElement;
+    content: string;
+    features: string[];
+    featureTitle: string;
+    price: string;
+    title: string;
+}
+export declare const PriceCard: ({ actions, content, featureTitle, features, price, title, }: PriceCardProps) => React.JSX.Element;

package/dist/components/card/price/price.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+import { Checkmark } from 'icons';
+export const PriceCard = ({ actions, content, featureTitle, features, price, title, }) => {
+    const id = React.useId();
+    return (React.createElement(Price, null,
+        React.createElement(Box, { "$align": "stretch", "$display": "flex", "$dir": "column", "$gap": 24, sx: `
+          padding: 24px 48px; 
+          background-color: var(--color-grey-10); 
+          border-radius: 16px 16px 0px 0px;
+        ` },
+            React.createElement(H, { as: "h6", "$fontSize": 24, "$lineHeight": 36, "$semiBold": true, "$textAlign": "center" }, title),
+            React.createElement(Box, { "$dir": "column" },
+                React.createElement(H, { as: "p", "$bold": true, "$fontSize": 32, "$lineHeight": 48, "$textClampLines": 5, "$textAlign": "center" }, price),
+                React.createElement(P, { as: "span", "$color": "grey-4", "$textAlign": "center" }, "/month")),
+            actions),
+        React.createElement(Box, { sx: "padding: 16px 24px; position: relative;", "$display": "flex", "$dir": "column" },
+            React.createElement(P, { sx: "padding: 16px 0px;" }, content),
+            React.createElement(Divider, null),
+            React.createElement(Box, { sx: "padding: 16px 0px;", "$dir": "column", "$gap": 8 },
+                React.createElement(P, { "$color": "grey-2", "$mediumBold": true }, featureTitle),
+                features.map((item, index) => (React.createElement(Box, { key: id + index.toString(36), "$align": "center", "$gap": 12 },
+                    React.createElement(Checkmark, { color: "green-5", sx: "padding: 2px; border-radius: 50%; background-color: var(--color-green-9);" }),
+                    React.createElement(P, { "$fontSize": 14, "$lineHeight": 20 }, item))))))));
+};
+const Price = styled.figure `
+  margin: 0px;
+  padding: 0px;
+  width: 280px;
+  height: fit-content;
+  border-radius: 16px;
+  box-shadow: var(--elevation-2);
+  user-select: none;
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-3);
+  }
+`;
+const Divider = styled.div `
+  height: 1px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-grey-9);
+`;

package/dist/components/card/regular/index.d.ts

@@ -0,0 +1,2 @@
+export { RegularCard } from './regular';
+export type { RegularCardProps } from './regular';

package/dist/components/card/regular/index.js

@@ -0,0 +1 @@
+export { RegularCard } from './regular';

package/dist/components/card/regular/regular.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface RegularCardProps extends React.PropsWithChildren {
+    href?: string;
+    image: string;
+    sx?: string;
+}
+export declare const RegularCard: ({ children, href, image, sx, }: RegularCardProps) => React.JSX.Element;

package/dist/components/card/regular/regular.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+export const RegularCard = ({ children, href, image, sx, }) => {
+    return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
+        React.createElement("img", { src: image, alt: "" }),
+        React.createElement(Box, { "$dir": "column", "$padding": 24 }, children)));
+};
+const Wrapper = styled.div `
+  position: relative;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-1);
+  border-radius: 16px;
+  background-color: var(--color-white);
+
+  ${({ $isLink }) => $isLink
+    ? `
+    &:hover {
+      border: 1px solid var(--color-primary-blue-3);
+    }`
+    : ''}
+
+  img {
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;

package/dist/components/card/video/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoEpisodeCard } from './video';
+export type { VideoEpisodeCardProps } from './video';

package/dist/components/card/video/index.js

@@ -0,0 +1 @@
+export { VideoEpisodeCard } from './video';