@soul-refiner/design-system 2.5.0-alpha.3 → 2.5.0-alpha.5

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

@@ -0,0 +1,354 @@
+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 CardInGroup = ({ id, type }) => (React.createElement(Card, { key: id, type: type, content: "Men are giving up Porn because of this... Join over 2 million men in over 100 countries who are learning to live free of porn through the proven strategies and practical tools taught in the Conquer Series.", cta: React.createElement(Box, { "$dir": "column" },
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Watch with Soul Refiner")), image: "https://sr-platform.s3.us-east-005.backblazeb2.com/f7a84d1f4e70a940b63d7d6d96beab68.jpg", logo: React.createElement(Avatar, { as: "div", image: "https://f005.backblazeb2.com/file/sr-platform/community-avatar.png", size: 40 }), numRating: 15, rating: 95, subtitle: `6 ep`, supportLabel: "Text", title: "Legacy" }));
+const Story = (args) => React.createElement(Card, { ...args });
+const GroupStory = () => (React.createElement(Box, { "$flow": "row wrap", "$gap": 24 },
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61233", type: "video-episode" }),
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61234", type: "audio-episode" }),
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61235", type: "video-episode" }),
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61236", type: "written-episode" }),
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61213", type: "video-episode" }),
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61224", type: "audio-episode" }),
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61135", type: "audio-episode" }),
+    React.createElement(CardInGroup, { id: "cours_ruel5iwZ5ho78lXlvqc61246", type: "written-episode" })));
+/************************************************************************
+ * 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,
+    purchaseText: 'Membership',
+    rating: 66,
+    subtitle: '6 ep',
+    supportLabel: 'Audio',
+    title: 'First Audio Course that is really long',
+};
+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',
+    onDelete: () => undefined,
+    // 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',
+    dotsActions: [
+        {
+            label: 'One value',
+            value: 'one-value',
+            // eslint-disable-next-line
+            onClick: () => console.log('one item'),
+        },
+        {
+            label: 'Another value',
+            value: 'another-value',
+            // eslint-disable-next-line
+            onClick: () => console.log('this is different item'),
+        },
+    ],
+    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.',
+    dotsActions: [
+        {
+            label: 'Delete',
+            value: 'newvalue',
+        },
+        {
+            label: 'Another Option',
+            value: 'anothervalue',
+        },
+    ],
+    featureTitle: 'Title',
+    features: [
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+    ],
+    label: 'Most Popular',
+    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,
+    purchaseText: 'Membership',
+    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,
+    purchaseText: 'Buy',
+    rating: 66,
+    subtitle: '6 ep',
+    supportLabel: 'Text',
+    title: 'Legacy',
+};
+export const Meeting = Story.bind({});
+Meeting.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    shareModal: {
+        control: 'none',
+    },
+};
+Meeting.args = {
+    type: 'meeting',
+    href: '#',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    actions: (React.createElement(Button, { size: "large", sx: "flex:1;", type: "secondary" }, "Join Meeting")),
+    title: 'Meeting - join immediately',
+    course: 'Warpath',
+    startDate: 'August 26',
+    endDate: 'September 14',
+    startTime: '2:30 PM',
+    endTime: '4:00 PM',
+    location: 'Online',
+    shareModal: React.createElement(React.Fragment, null, "Hello"),
+    // eslint-disable-next-line
+    handleInterestedOnClick: () => { },
+    // eslint-disable-next-line
+    handleNotInterestedOnClick: () => { },
+    // eslint-disable-next-line
+    handleVisibleToConnectionsOnClick: () => { },
+};
+export const RowOfCourses = GroupStory.bind({});
+export default meta;

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

@@ -0,0 +1,194 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { Button } from '../../../components/actions/button/button';
+import { Modal } from '../../../components/surfaces/modal/modal';
+import { Camera } from '../../../icons/basic/camera';
+import { Checkmark } from '../../../icons/basic/checkmark';
+import { Close } from '../../../icons/basic/close';
+import { Pencil } from '../../../icons/basic/pencil';
+import { Trash } from '../../../icons/basic/trash';
+export const FeatureCard = ({ content = '', editable, href, image, onDelete, 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 ? 'a' : 'div', href: href },
+        React.createElement(Figure, { "$editing": editing, "$isLink": isLink, "$sx": sx },
+            React.createElement(Image, { alt: title, height: 352, quality: 100, src: image, width: 352 }),
+            !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);
+                  }
+                ` }),
+                    onDelete && (React.createElement(Trash, { onClick: onDelete, 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: min-content;
+  box-sizing: border-box;
+  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;
+    object-fit: cover;
+  }
+
+  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: var(--font-inter);
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  user-select: none;
+`;
+const Content = styled.figcaption `
+  font-size: 14px;
+  font-family: var(--font-inter);
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+`;
+const EditTitle = styled.input `
+  width: calc(100% - 24px);
+  padding: 12px;
+  background-color: var(--color-white);
+  font-size: 18px;
+  font-family: var(--font-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: var(--font-inter);
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;

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

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

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

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

package/dist/src/components/card/meeting/index.js

@@ -0,0 +1 @@
+export { MeetingCard } from './meeting';