@cntrl-site/sdk-nextjs 0.2.13 → 0.3.0

package/src/components/items/VideoItem.tsx

@@ -3,39 +3,41 @@ import { TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getLayoutStyles } from '@cntrl-site/sdk';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
-export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, layouts }) => (
-  <LinkWrapper url={item.link?.url}>
-    <>
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
+  return (
+    <LinkWrapper url={item.link?.url}>
       <div className={`video-wrapper-${item.id}`}>
         <video autoPlay muted loop playsInline className="video">
           <source src={item.commonParams.url} />
         </video>
       </div>
       <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
-           .video-wrapper-${item.id} {
-              position: absolute;
-              overflow: hidden;
-              width: 100%;
-              height: 100%;
-              border-style: solid;
-              box-sizing: border-box;
-              border-color: ${strokeColor};
-              border-radius: ${radius * 100}vw;
-              border-width: ${strokeWidth * 100}vw;
-              opacity: ${opacity};
-            }`
-          ))
-        }
-        .video {
-          width: 100%;
-          height: 100%;
-          opacity: 1;
-          object-fit: cover;
-          pointer-events: none;
-        }
-      `}</style>
-    </>
-  </LinkWrapper>
-);
+      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+         .video-wrapper-${item.id} {
+            position: absolute;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            border-style: solid;
+            box-sizing: border-box;
+            border-color: ${strokeColor};
+            border-radius: ${radius * 100}vw;
+            border-width: ${strokeWidth * 100}vw;
+            opacity: ${opacity};
+          }`
+      ))
+      }
+      .video {
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        object-fit: cover;
+        pointer-events: none;
+      }
+    `}</style>
+    </LinkWrapper>
+  );
+};

package/src/components/items/VimeoEmbed.tsx

@@ -3,8 +3,10 @@ import { getLayoutStyles } from '@cntrl-site/sdk';
 import { TVimeoEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
-export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }) => {
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
  const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
@@ -53,5 +55,5 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }
         }
       `}</style>
     </LinkWrapper>
-  )
+  );
 };

package/src/components/items/YoutubeEmbed.tsx

@@ -4,8 +4,10 @@ import { TYoutubeEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
-export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, layouts }) => {
+export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
   const { autoplay, controls, url } = item.commonParams;
 
   const getValidYoutubeUrl = (url: string): string => {

package/src/index.ts

@@ -1,8 +1,8 @@
-import { cntrlSdkContext } from './provider/defaultContext';
+export { cntrlSdkContext } from './provider/defaultContext';
 
 export * from '@cntrl-site/sdk';
 
-export { RichTextConverter } from './utils/RichTextConverter';
+export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
 export { Page } from './components/Page';
 export { CNTRLHead as Head } from './components/Head';
 export { Article } from './components/Article';
@@ -19,4 +19,3 @@ export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
 // custom items
 export { CntrlProvider } from './provider/CntrlProvider';
 export type { CustomItemComponent } from './provider/CustomItemTypes';
-export const CustomItems = cntrlSdkContext.customItems;

package/src/provider/CntrlSdkContext.ts

@@ -1,7 +1,18 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
+import { TLayout, TTypePresets } from '@cntrl-site/sdk';
 
 export class CntrlSdkContext {
+  public typePresets?: TTypePresets;
+  public layouts: TLayout[] = [];
   constructor(
-    public readonly customItems: CustomItemRegistry
-  ) { }
+    public readonly customItems: CustomItemRegistry,
+  ) {}
+
+  setTypePresets(typePresets: TTypePresets) {
+    this.typePresets = typePresets;
+  }
+
+  setLayouts(layouts: TLayout[]) {
+    this.layouts = layouts;
+  }
 }

package/src/utils/{RichTextConverter.tsx → RichTextConverter/RichTextConverter.tsx}

@@ -7,12 +7,12 @@ import {
   TRichTextItem,
   VerticalAlign
 } from '@cntrl-site/sdk';
-import { LinkWrapper } from '../components/LinkWrapper';
+import { LinkWrapper } from '../../components/LinkWrapper';
 
 interface StyleGroup {
   start: number;
   end: number;
-  styles: DraftStyle[];
+  styles: Style[];
 }
 
 interface EntitiesGroup {
@@ -22,7 +22,7 @@ interface EntitiesGroup {
   end: number;
 }
 
-interface DraftStyle {
+interface Style {
   name: string;
   value?: string;
 }
@@ -36,7 +36,8 @@ export const FontStyles: Record<string, Record<string, string>> = {
 export class RichTextConverter {
   toHtml(
     richText: TRichTextItem,
-    layouts: TLayout[]
+    layouts: TLayout[],
+    hasPreset: boolean
   ): [ReactNode[], string] {
     const { text: rawText, blocks = [] } = richText.commonParams;
     const text = Array.from(rawText); // because of emoji
@@ -86,7 +87,7 @@ export class RichTextConverter {
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
               text-align: ${ta};
-              line-height: 0;
+              ${hasPreset ? '' : 'line-height: 0;'}
               white-space: normal;
               overflow-wrap: break-word;
             }
@@ -215,7 +216,7 @@ export class RichTextConverter {
     return entitiesGroups;
   }
 
-  private static fromDraftToInline(draftStyle: DraftStyle): string {
+  private static fromDraftToInline(draftStyle: Style): string {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
       'COLOR': { 'color': value },

package/src/utils/generateTypePresetStyles/__mock__/layoutsMock.ts

@@ -0,0 +1,37 @@
+import { TLayout } from '@cntrl-site/sdk';
+
+const sampleGrid = {
+  columnsAmount: 0,
+  beatHeight: 0,
+  beatMultiplier: 1,
+  maxWidth: 0,
+  columnWidth: 0.01,
+  gutterWidth: 0.001
+};
+
+export const layoutsMock: TLayout[] = [
+  {
+    id: 'tablet',
+    exemplary: 768,
+    startsWith: 768,
+    title: 'Tablet',
+    icon: 'any',
+    grid: sampleGrid
+  },
+  {
+    id: 'desktop',
+    exemplary: 1440,
+    startsWith: 1024,
+    title: 'Desktop',
+    icon: 'any',
+    grid: sampleGrid
+  },
+  {
+    id: 'mobile',
+    exemplary: 375,
+    startsWith: 0,
+    title: 'Mobile',
+    icon: 'any',
+    grid: sampleGrid
+  }
+];

package/src/utils/generateTypePresetStyles/__mock__/presetMock.ts

@@ -0,0 +1,49 @@
+import { AllowedTags, TTypePresets } from '@cntrl-site/sdk';
+
+const layoutParams = {
+  'desktop': {
+    fontSize: 0.011111,
+    lineHeight: 0.013888,
+    wordSpacing: 0.0006944,
+    letterSpacing: 0.0006944,
+    color: 'rgba(0, 0, 0, 1)'
+  },
+  'tablet': {
+    fontSize: 0.02604,
+    lineHeight: 0.03125,
+    wordSpacing: 0,
+    letterSpacing: 0,
+    color: 'rgba(0, 0, 0, 1)'
+  },
+  'mobile': {
+    fontSize: 0.053333,
+    lineHeight: 0.064,
+    wordSpacing: 0.008,
+    letterSpacing: 0.008,
+    color: 'rgba(0, 0, 0, 1)'
+  }
+};
+
+export const presetMock: TTypePresets = {
+  id: 'presetId',
+  presets: [
+    {
+      id: 'heading01',
+      fontFamily: 'Aeonik',
+      fontWeight: '400',
+      fontStyle: '',
+      name: 'Heading',
+      tag: AllowedTags.h1,
+      layoutParams
+    },
+    {
+      id: 'heading02',
+      fontFamily: 'Aeonik',
+      fontWeight: '400',
+      fontStyle: 'italic',
+      name: 'Heading',
+      tag: AllowedTags.h1,
+      layoutParams
+    }
+  ]
+};

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.test.ts

@@ -0,0 +1,49 @@
+import { generateTypePresetStyles } from './generateTypePresetStyles';
+import { presetMock } from './__mock__/presetMock';
+import { layoutsMock } from './__mock__/layoutsMock';
+
+describe('generateTypePresetStyles', () => {
+  it('generates blocks of styles', () => {
+    const styles = generateTypePresetStyles(presetMock, layoutsMock);
+    const expectedMedia = (id: string) =>
+`@media (min-width: 0px) and (max-width: 767px) {
+  .cntrl-preset-${id} {
+    font-size: 5.3332999999999995vw;
+    line-height: 6.4vw;
+    letter-spacing: 0.8vw;
+    word-spacing: 0.8vw;
+    color: rgba(0, 0, 0, 1);
+  }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .cntrl-preset-${id} {
+    font-size: 2.604vw;
+    line-height: 3.125vw;
+    letter-spacing: 0vw;
+    word-spacing: 0vw;
+    color: rgba(0, 0, 0, 1);
+  }
+}
+@media (min-width: 1024px) {
+  .cntrl-preset-${id} {
+    font-size: 1.1111vw;
+    line-height: 1.3888vw;
+    letter-spacing: 0.06944vw;
+    word-spacing: 0.06944vw;
+    color: rgba(0, 0, 0, 1);
+  }
+}`;
+    expect(styles).toBe(
+`.cntrl-preset-heading01 {
+  font-family: Aeonik;
+  font-weight: 400;
+}
+${expectedMedia('heading01')}
+.cntrl-preset-heading02 {
+  font-family: Aeonik;
+  font-style: italic;
+  font-weight: 400;
+}
+${expectedMedia('heading02')}`);
+  });
+});

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.ts

@@ -0,0 +1,25 @@
+import { getLayoutMediaQuery, TLayout, TTypePresets } from '@cntrl-site/sdk';
+
+const reEmptyLines = /^\s*\n/gm;
+
+export function generateTypePresetStyles(preset: TTypePresets, layouts: TLayout[]): string {
+  const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
+  const stylesStr = (`
+    ${preset.presets.map(p => (`
+.cntrl-preset-${p.id} {
+  font-family: ${p.fontFamily};
+  ${p.fontStyle.length > 0 ? `font-style: ${p.fontStyle};` : ''}
+  font-weight: ${p.fontWeight};
+}
+  ${sorted.map(l => (`
+${getLayoutMediaQuery(l.id, sorted)} {
+  .cntrl-preset-${p.id} {
+    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
+    line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
+    letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
+    word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
+    color: ${p.layoutParams[l.id].color};
+  }
+}`)).join('\n')}`)).join('\n')}`);
+  return stylesStr.replace(reEmptyLines, '');
+}

package/src/utils/getInvertedRanges.ts

@@ -0,0 +1,43 @@
+interface Range {
+  start: number;
+  end: number;
+}
+
+/**
+ * @param length
+ * @param ranges - SORTED array of ranges [start, end)
+ */
+
+export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
+  if (ranges.length === 0) {
+    return [{
+      start: 0,
+      end: length
+    }];
+  }
+  const inverted: Range[] = [];
+  if (ranges[0].start > 0) {
+    inverted.push({
+      start: 0,
+      end: ranges[0].start
+    });
+  }
+  for (let i = 0; i < ranges.length - 1; i += 1) {
+    const left = ranges[i];
+    const right = ranges[i + 1];
+    if (right.start - left.end > 0) {
+      inverted.push({
+        start: left.end,
+        end: right.start
+      });
+    }
+  }
+  const lastRange = ranges[ranges.length - 1];
+  if (lastRange.end < length) {
+    inverted.push({
+      start: lastRange.end,
+      end: length
+    });
+  }
+  return inverted;
+}