@soul-refiner/design-system 0.1.37 → 0.1.39

package/src/components/atoms/typography/typography.tsx

@@ -1,49 +0,0 @@
-'use client';
-
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import {
-  Color,
-  Styleable,
-  TextClamp,
-  TypographyStyle,
-  TypographyWeight,
-} from '../../../types';
-
-export type TypographyProps = Pick<
-  React.HTMLAttributes<HTMLParagraphElement>,
-  | 'children'
-  | 'className'
-  | 'dangerouslySetInnerHTML'
-  | 'id'
-  | 'onBlur'
-  | 'onBlurCapture'
-  | 'onClick'
-  | 'onChange'
-  | 'onCopy'
-  | 'onCut'
-  | 'onKeyDown'
-  | 'onKeyDownCapture'
-  | 'onKeyUp'
-  | 'onKeyUpCapture'
-  | 'onMouseDown'
-  | 'onMouseDownCapture'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
-  | 'onMouseOut'
-  | 'onMouseOver'
-> & { value?: string; href?: string } & Color &
-  Styleable &
-  TextClamp &
-  TypographyStyle &
-  TypographyWeight;
-
-export const Typography = styled.p<TypographyProps>`
-  margin: 0px;
-  font-family: Inter;
-  ${Styles.color}
-  ${Styles.weight}
-  ${Styles.typography}
-  ${Styles.styleable}
-  ${({ $textClampLines }) => ($textClampLines ? Styles.textClamp : '')}
-`;

package/src/components/card/action/action.tsx

@@ -1,108 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, H, P } from '../../';
-
-export interface ActionCardProps {
-  actions: React.ReactElement | React.ReactElement[];
-  content: string;
-  image: string;
-  logo: React.ReactElement;
-  subtitle: string;
-  sx?: string;
-  title: string;
-}
-
-export const ActionCard = ({
-  actions,
-  content,
-  image,
-  logo,
-  subtitle,
-  sx,
-  title,
-}: ActionCardProps) => {
-  return (
-    <Action $backgroundImage={image} $sx={sx}>
-      <img src={image} alt="" />
-      <Figcaption>
-        <LogoWrapper>{logo}</LogoWrapper>
-        <H
-          as="span"
-          $mediumBold
-          $color="grey-2"
-          $fontSize={18}
-          $lineHeight={26}
-        >
-          {title}
-        </H>
-        <P as="span" $color="grey-4" $fontSize={12} $lineHeight={16}>
-          {subtitle}
-        </P>
-        <P
-          as="span"
-          $color="grey-3"
-          $fontSize={14}
-          $lineHeight={20}
-          $textAlign="center"
-          sx="margin-top: 12px;"
-        >
-          {content}
-        </P>
-        <Box
-          $display="flex"
-          $dir="row"
-          $gap={8}
-          sx="margin-top: 8px; width: 100%;"
-        >
-          {React.Children.toArray(actions)}
-        </Box>
-      </Figcaption>
-    </Action>
-  );
-};
-
-const Action = styled.figure<{
-  $backgroundImage: string;
-  $sx?: string;
-}>`
-  position: relative;
-  aspect-ratio: 310 / 374;
-  border-radius: 16px;
-  max-width: 374px;
-  width: 100%;
-  margin: 0px;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-end;
-  box-shadow: var(--elevation-1);
-
-  img {
-    aspect-ratio: 310 / 160;
-    border-radius: 16px 16px 0px 0px;
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-const Figcaption = styled.figcaption`
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-flow: column nowrap;
-  aspect-ratio: 310 / 198;
-  padding: 56px 16px 16px;
-  box-sizing: border-box;
-  background-color: var(--color-white);
-  border-radius: 0px 0px 15px 15px;
-  text-align: center;
-`;
-
-const LogoWrapper = styled.div`
-  position: absolute;
-  top: -28px;
-  right: calc(50% - 28px);
-  border: 4px solid var(--color-white);
-  border-radius: 50%;
-`;

package/src/components/card/action/index.ts

@@ -1,2 +0,0 @@
-export { ActionCard } from './action';
-export type { ActionCardProps } from './action';

package/src/components/card/audio/audio.tsx

@@ -1,177 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, H, P, Rate } from '../../';
-
-export interface AudioEpisodeCardProps {
-  actions: React.ReactElement[];
-  actionDropdown?: React.ReactElement;
-  content: string;
-  cta: React.ReactElement;
-  href: string;
-  image: string;
-  logo?: React.ReactElement;
-  numRating: number;
-  rating: number;
-  subtitle: string;
-  supportLabel?: string;
-  sx?: string;
-  title: string;
-}
-
-export const AudioEpisodeCard = ({
-  actions,
-  actionDropdown,
-  content,
-  cta,
-  href,
-  image,
-  logo,
-  numRating,
-  rating,
-  subtitle,
-  supportLabel,
-  sx,
-  title,
-}: AudioEpisodeCardProps) => {
-  const hasLogo = !!logo;
-
-  return (
-    <Wrapper $sx={sx} href={href}>
-      <Figure>
-        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
-        <img className="thumbnail" src={image} alt="" />
-        <Figcaption>
-          <Box $display="block" className="hidden">
-            {cta}
-          </Box>
-          <Box $align="center" $dir="row" $gap={16}>
-            {logo}
-            <Box $dir="column">
-              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
-                {title}
-              </H>
-              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
-                {subtitle}
-              </P>
-            </Box>
-            {supportLabel && (
-              <P
-                className="not-hover"
-                $color="grey-4"
-                $fontSize={12}
-                $lineHeight={16}
-                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
-              >
-                {supportLabel}
-              </P>
-            )}
-          </Box>
-          <P
-            $color="grey-5"
-            $fontSize={14}
-            $lineHeight={20}
-            $mediumBold
-            $textClampLines={6}
-            className="hidden inline"
-          >
-            {content}
-          </P>
-          <Box className="hidden" $align="center" $dir="row">
-            <Rate isRateable={false} percent={rating} size="small" />
-            <P
-              $color="grey-4"
-              $fontSize={12}
-              $lineHeight={16}
-              sx="margin: 0px auto 0px 4px;"
-            >
-              ({numRating})
-            </P>
-            <Box $align="center" $dir="row" $gap={8}>
-              {React.Children.toArray(actions)}
-            </Box>
-          </Box>
-        </Figcaption>
-      </Figure>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.a<{ $sx?: string }>`
-  cursor: pointer;
-  display: block;
-  position: relative;
-  user-select: none;
-
-  figure {
-    max-width: 228px;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  &:hover {
-    .hidden {
-      display: flex;
-
-      &.inline {
-        display: -webkit-box;
-      }
-    }
-
-    .not-hover {
-      display: none;
-    }
-
-    .thumbnail {
-      border-radius: 16px 16px 0px 0px;
-    }
-
-    figure {
-      max-width: 280px;
-      aspect-ratio: 280 / 434;
-      box-shadow: var(--elevation-3);
-      background: linear-gradient(
-        0deg,
-        #ffffff 50%,
-        rgba(255, 255, 255, 0.85) 55%,
-        rgba(255, 255, 255, 0.1) 80%
-      );
-    }
-
-    figcaption {
-      margin-top: -80px;
-      padding: 24px;
-    }
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-const Figure = styled.figure`
-  margin: 0px;
-  border-radius: 16px;
-
-  .thumbnail {
-    border-radius: 16px;
-    position: relative;
-    z-index: -1;
-    width: 100%;
-    aspect-ratio: 228 / 228;
-  }
-`;
-
-const Figcaption = styled.figcaption`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 8px;
-  padding: 8px;
-`;
-
-const DropdownWrapper = styled.div`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-`;

package/src/components/card/audio/index.ts

@@ -1,2 +0,0 @@
-export { AudioEpisodeCard } from './audio';
-export type { AudioEpisodeCardProps } from './audio';

package/src/components/card/card.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import React from 'react';
-import { ActionCard, ActionCardProps } from './action';
-import { AudioEpisodeCard, AudioEpisodeCardProps } from './audio';
-import { FeatureCard, FeatureCardProps } from './feature';
-import { PersonCard, PersonCardProps } from './person';
-import { PriceCard, PriceCardProps } from './price';
-import { RegularCard, RegularCardProps } from './regular';
-import { VideoEpisodeCard, VideoEpisodeCardProps } from './video';
-import { WrittenEpisodeCard, WrittenEpisodeCardProps } from './written';
-
-type CardType =
-  | 'action'
-  | 'audio-episode'
-  | 'feature'
-  | 'person'
-  | 'price'
-  | 'regular'
-  | 'video-episode'
-  | 'written-episode';
-
-export type CardProps = (
-  | ActionCardProps
-  | AudioEpisodeCardProps
-  | FeatureCardProps
-  | PersonCardProps
-  | PriceCardProps
-  | RegularCardProps
-  | VideoEpisodeCardProps
-  | WrittenEpisodeCardProps
-) & {
-  type: CardType;
-};
-
-export const Card = ({ type = 'regular', ...rest }: CardProps) => {
-  const lookup: Record<CardType, React.ReactElement> = {
-    action: <ActionCard {...(rest as ActionCardProps)} />,
-    'audio-episode': <AudioEpisodeCard {...(rest as AudioEpisodeCardProps)} />,
-    feature: <FeatureCard {...(rest as FeatureCardProps)} />,
-    person: <PersonCard {...(rest as PersonCardProps)} />,
-    price: <PriceCard {...(rest as PriceCardProps)} />,
-    regular: <RegularCard {...(rest as RegularCardProps)} />,
-    'video-episode': <VideoEpisodeCard {...(rest as VideoEpisodeCardProps)} />,
-    'written-episode': (
-      <WrittenEpisodeCard {...(rest as WrittenEpisodeCardProps)} />
-    ),
-  };
-
-  return lookup[type];
-};

package/src/components/card/feature/feature.tsx

@@ -1,250 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, Button, Modal } from '../../';
-import { Camera, Checkmark, Close, Pencil } from '../../../icons';
-
-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 const FeatureCard = ({
-  content = '',
-  editable,
-  href,
-  image,
-  onSave,
-  sx,
-  title = '',
-  uploadModal,
-}: FeatureCardProps) => {
-  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: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(event.target.value);
-  };
-
-  const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setContent(event.target.value);
-  };
-
-  const showEditIcon = !editing && editable;
-  const isLink = !!href;
-
-  return (
-    <Wrapper as={isLink ? 'div' : 'a'} href={href}>
-      <Figure $editing={editing} $isLink={isLink} $sx={sx}>
-        <img alt={title} src={image} />
-        {!editing && (
-          <Title>
-            {editingTitle}
-            <figure>
-              <Content>{editingContent}</Content>
-            </figure>
-            {showEditIcon && (
-              <Pencil className="edit" onClick={handleSetEditing} />
-            )}
-            {editable && uploadModal && (
-              <Modal>
-                <Modal.Trigger>
-                  <Button
-                    icon={<Camera />}
-                    type="outlined"
-                    size="small"
-                    sx="position: absolute; right: 8px; top: -72px;"
-                  >
-                    Edit
-                  </Button>
-                </Modal.Trigger>
-                <Modal.Content>{uploadModal}</Modal.Content>
-              </Modal>
-            )}
-          </Title>
-        )}
-        {editing && (
-          <Box
-            $align="flex-end"
-            $display="flex"
-            $dir="column"
-            $gap={8}
-            sx="position: relative;"
-          >
-            <EditTitle onChange={handleTitleChange} value={editingTitle} />
-            <EditContent
-              onChange={handleContentChange}
-              value={editingContent}
-            />
-            <Box $gap={8}>
-              <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);
-                  }
-                `}
-              />
-              <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);
-                  }
-                `}
-              />
-            </Box>
-          </Box>
-        )}
-      </Figure>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  text-decoration: none;
-`;
-
-const Figure = styled.figure<{
-  $editing: boolean;
-  $isLink: boolean;
-  $sx?: string;
-}>`
-  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/src/components/card/feature/index.ts

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

package/src/components/card/index.ts

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

package/src/components/card/person/index.ts

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