oddsgate-ds 1.0.2

package/src/styles/reset.ts

@@ -0,0 +1,47 @@
+const resetStyles = `
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  article, aside, details, figcaption, figure,
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol, ul {
+    list-style: none;
+  }
+  blockquote, q {
+    quotes: none;
+  }
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+`;
+
+export default resetStyles;

package/src/styles/utilities.ts

@@ -0,0 +1,326 @@
+import {
+  colors,
+  grid_conf,
+  radius,
+  responsiveMedia,
+  shadows,
+  spaces,
+  spacesNegative,
+  typography
+} from './variables';
+
+export const fontSize = (typo: string) => {
+  return `
+    ${typography[typo]?.sizeMob ? `
+      font-size: ${typography[typo].sizeMob};
+
+      @media only screen and (min-width: ${responsiveMedia}) {
+        font-size: ${typography[typo].size};
+      }
+    ` : `
+      font-size: ${typography[typo].size};
+    `}
+
+    line-height: ${typography[typo].height};
+  `
+}
+
+const spacers = {
+  "auto": "auto",
+  ...spaces
+}
+
+
+export const utilities: {
+  [key: string]: {
+    responsive?: boolean;
+    property?: string;
+    class?: string;
+    values?: {
+      [key: string]: string | number;
+    };
+  };
+} = {
+  "align": {
+    property: "vertical-align",
+    class: "align",
+    values: {
+      top: "top",
+      middle: "middle",
+      bottom: "bottom"
+    },
+  },
+  "display": {
+    responsive: true,
+    property: "display",
+    class: "d",
+    values: {
+      "inline-block": "inline-block",
+      "inline-flex": "inline-flex",
+      block: "block",
+      table: "table",
+      flex: "flex",
+      none: "none"
+    },
+  },
+  "position": {
+    property: "position",
+    values: {
+      relative: "relative",
+      absolute: "absolute",
+      fixed: "fixed"
+    },
+  },
+  "width": {
+    responsive: true,
+    property: "width",
+    class: "w",
+    values: {
+      100: "100%",
+      auto: "auto"
+    }
+  },
+  "height": {
+    property: "height",
+    class: "h",
+    values: {
+      100: "100%",
+      auto: "auto"
+    }
+  },
+  "flex-grow": {
+    responsive: true,
+    property: "flex-grow",
+    values: {
+      0: "0",
+      1: "1",
+    }
+  },
+  "flex-shrink": {
+    responsive: true,
+    property: "flex-shrink",
+    values: {
+      0: "0",
+      1: "1",
+    }
+  },
+  "flex-wrap": {
+    responsive: true,
+    property: "flex-wrap",
+    class: 'flex',
+    values: {
+      wrap: "wrap",
+      nowrap: "nowrap"
+    },
+  },
+  "justify-content": {
+    responsive: true,
+    property: "justify-content",
+    values: {
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+    }
+  },
+  "align-items": {
+    responsive: true,
+    property: "align-items",
+    values: {
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      baseline: "baseline",
+      stretch: "stretch",
+    }
+  },
+  "align-content": {
+    responsive: true,
+    property: "align-content",
+    values: {
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      between: "space-between",
+      around: "space-around",
+      stretch: "stretch",
+    }
+  },
+  "align-self": {
+    responsive: true,
+    property: "align-self",
+    values: {
+      auto: "auto",
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      baseline: "baseline",
+      stretch: "stretch",
+    }
+  },
+  "order": {
+    responsive: true,
+    property: "order",
+    values: {
+      first: -1,
+      0: 0,
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      last: 6,
+    },
+  },
+  "margin": {
+    responsive: true,
+    property: "margin",
+    class: "m",
+    values: spacers
+  },
+  "margin-top": {
+    responsive: true,
+    property: "margin-top",
+    class: "mt",
+    values: spacers
+  },
+  "negative-margin-top": {
+    responsive: true,
+    property: "margin-top",
+    class: "mt-neg",
+    values: spacesNegative
+  },
+  "margin-end": {
+    responsive: true,
+    property: "margin-right",
+    class: "me",
+    values: spacers
+  },
+  "margin-bottom": {
+    responsive: true,
+    property: "margin-bottom",
+    class: "mb",
+    values: spacers
+  },
+  "margin-start": {
+    responsive: true,
+    property: "margin-left",
+    class: "ms",
+    values: spacers
+  },
+  "padding": {
+    responsive: true,
+    property: "padding",
+    class: "p",
+    values: spaces
+  },
+  "padding-top": {
+    responsive: true,
+    property: "padding-top",
+    class: "pt",
+    values: spaces
+  },
+  "padding-end": {
+    responsive: true,
+    property: "padding-right",
+    class: "pe",
+    values: spaces
+  },
+  "padding-bottom": {
+    responsive: true,
+    property: "padding-bottom",
+    class: "pb",
+    values: spaces
+  },
+  "padding-start": {
+    responsive: true,
+    property: "padding-left",
+    class: "ps",
+    values: spaces
+  },
+  "font-weight": {
+    property: "font-weight",
+    class: "fw",
+    values: {
+      light: 300,
+      regular: 400,
+      semibold: 600,
+      bold: 700,
+      black: 800
+    }
+  },
+  "text-align": {
+    responsive: true,
+    property: "text-align",
+    class: "text",
+    values: {
+      start: "left",
+      end: "right",
+      center: "center",
+    }
+  },
+  "text-transform": {
+    property: "text-transform",
+    class: "text",
+    values: {
+      lowercase: "lowercase",
+      uppercase: "uppercase",
+      capitalize: "capitalize"
+    }
+  },
+  "color": {
+    property: "color",
+    class: "color",
+    values: colors
+  },
+  "bg": {
+    property: "background-color",
+    class: "bg",
+    values: colors
+  },
+  "shadow": {
+    property: "box-shadow",
+    class: "shadow",
+    values: shadows
+  },
+  "radius": {
+    property: "border-radius",
+    class: "radius",
+    values: radius
+  },
+};
+
+export function generateUtilities(utility: string, breakpoint: string): string {
+  const property: string | undefined = utilities[utility]?.property;
+  const className: string | undefined = utilities[utility]?.class || property;
+  const values: { [key: string]: string | number } | undefined = utilities[utility]?.values;
+  const responsive: boolean | undefined = utilities[utility]?.responsive;
+  let cssSelector: string = "";
+
+  Object.keys(values || {}).map((key: string, i: number) => {
+    cssSelector += `.${`${className}-${key}`}{
+      ${property}: ${values?.[key]};
+    }`;
+  });
+
+  Object.keys(values || {}).map((key: string, i: number) => {
+    if (responsive) {
+      cssSelector += `
+      ${`.${className}-md-${key}`}{
+        @media (min-width: ${grid_conf.breakpoints.$md as string}){
+          ${property}: ${values?.[key]};
+        }
+      }
+      ${`.${className}-lg-${key}`}{
+        @media (min-width: ${grid_conf.breakpoints.$lg}){
+          ${property}: ${values?.[key]};
+        }
+      }
+    `;
+    }
+  });
+
+  return cssSelector;
+}

package/src/styles/variables.ts

@@ -0,0 +1,168 @@
+export const pxToRem = (size: number) => {
+  return (size / 16) * 1 + 'rem'
+}
+
+export const fontName = "Noto Sans"
+export const alternativeFont = "";
+
+export const gutter = pxToRem(8); //needs to be in this file
+
+export const desktop_width = "1360"; //container size of design on desktop
+export const tablet_width = "768"; //container size of design on tablet
+export const mobile_width = "375"; //container size of design on mobile
+export const responsiveMedia = "980px"; //mobile media value for bootstrap
+export const mobileMedia = "360px"; //mobile media value
+
+export const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
+
+export type IBreakpoints = {
+  $xs?: string,
+  $sm?: string,
+  $md?: string,
+  $lg?: string,
+  $xl?: string,
+  $xxl?: string,
+}
+
+export const colors = <Record<string, string>>{
+  // Defaults
+  white: '#fff',
+  black: '#000',
+  transparent: "transparent",
+
+  // Gray
+  gray10: '#F5F3F1',
+  gray20: '#C0BFBE',
+  gray50: '#A0A0A0',
+  gray70: '#6E6D6C',
+  gray90: '#3C3B39',
+
+  primary10: '#FC3151',
+  primary70: '#FF455',
+
+  // Feedback
+  warning: '#ea9a1a',
+  success: '#00FFD2',
+  error: '#E91101',
+};
+
+export const spaces = <Record<string, string>>{
+  0: '0',
+  1: pxToRem(4),
+  2: pxToRem(8),
+  3: pxToRem(12),
+  4: pxToRem(16),
+  5: pxToRem(20),
+  6: pxToRem(28),
+  7: pxToRem(36),
+  8: pxToRem(48),
+  9: pxToRem(64),
+  10: pxToRem(88),
+  11: pxToRem(120),
+}
+export const spacesNegative = <Record<string, string>>{
+  0: '0',
+  1: pxToRem(-4),
+  2: pxToRem(-8),
+  3: pxToRem(-12),
+  4: pxToRem(-20),
+  5: pxToRem(-28),
+  6: pxToRem(-36),
+  7: pxToRem(-48),
+  8: pxToRem(-64),
+  9: pxToRem(-88),
+  10: pxToRem(-120),
+}
+
+//if responsive is not needed for a size just set the size as px instead of rem
+export const typography = <Record<string, Record<string, unknown>>>{
+  display: {
+    size: pxToRem(104),
+    sizeMob: pxToRem(56),
+    height: 1.4,
+  },
+  h1: {
+    size: pxToRem(48),
+    sizeMob: pxToRem(40),
+    height: 1.4,
+  },
+  h2: {
+    size: pxToRem(40),
+    sizeMob: pxToRem(32),
+    height: 1.4,
+  },
+  h3: {
+    size: pxToRem(32),
+    sizeMob: pxToRem(28),
+    height: 1.2,
+  },
+  h4: {
+    size: pxToRem(28),
+    sizeMob: pxToRem(24),
+    height: 1.4,
+  },
+  h5: {
+    size: pxToRem(24),
+    sizeMob: pxToRem(20),
+    height: 1.4,
+  },
+  h6: {
+    size: pxToRem(20),
+    sizeMob: pxToRem(18),
+    height: 1.4,
+  },
+  texts: {
+    size: "16px",
+    sizeMob: "14px",
+    height: 1.6,
+  },
+  captions: {
+    size: "12px",
+    sizeMob: "10px",
+    height: 1.2,
+  },
+};
+
+export const radius = <Record<string, string>>{
+  sm: '6px',
+  md: '10px',
+  lg: '50px',
+  rounded: '100px',
+}
+export const shadows = <Record<string, string>>{
+  sm: '10px 20px 20px rgba(0, 78, 210, 0.03)',
+  md: '10px 30px 30px rgba(0, 78, 210, 0.05)',
+  lg: '10px 40px 40px rgba(0, 78, 210, 0.07)',
+}
+export const zIndexes = <Record<string, string>>{
+  progress: '200',
+  modal: '100',
+  content: '99',
+  preloader: '96',
+  linker: '95'
+}
+export const grid_conf: {
+  gridSize: number,
+  gutter: number,
+  mediaQuery: string,
+  container: IBreakpoints,
+  breakpoints: IBreakpoints
+} = {
+  gridSize: 12,
+  gutter: 16,
+  mediaQuery: 'only screen',
+  container: {
+    $sm: "960px",
+    $md: "1140px",
+    $lg: "1320px",
+    $xl: "1560px",
+    $xxl: "1720px"
+  },
+  breakpoints: {
+    $xs: "",
+    $sm: "576px",
+    $md: "768px",
+    $lg: "980px",
+    $xl: "1280px"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,87 @@
+import type { Plugin } from 'vite';
+import { defineConfig } from 'vite'
+import {exec} from 'node:child_process';
+import hypothetical from 'rollup-plugin-hypothetical';
+import path from 'path';
+import { peerDependencies } from './package.json';
+import react from '@vitejs/plugin-react'
+import { transform } from 'esbuild';
+import tsConfigPaths from 'vite-tsconfig-paths';
+
+const locales: [] = [
+  // path to locale files
+];
+
+
+//Custom plugins
+const dts = (): Plugin => ({
+  name: 'dts',
+  buildEnd: (error) => {
+    if (error) {
+      return;
+    }
+
+    exec('tsup src/index.ts --format esm --dts-only', (err) => {
+      if (err) {
+        throw new Error('Failed to generate declaration files');
+      }
+    });
+  },
+});
+
+const minify = (): Plugin => ({
+  name: 'minify',
+  renderChunk: {
+    order: 'post',
+    async handler(code, _, outputOptions) {
+      if (outputOptions.format === 'es') {
+        return await transform(code, {
+          minify: true,
+          sourcemap: true,
+        });
+      }
+
+      return null;
+    },
+  },
+});
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '<package>': 'node_modules/<package>/dist/esm/index.js',
+    },
+  },
+  build: {
+    emptyOutDir: true,
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['cjs', 'es'],
+      fileName: (format) => (format === 'cjs' ? 'cjs/index.js' : 'esm/index.js'),
+    },
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+      },
+      external: [
+        ...Object.keys(peerDependencies),
+      ],
+    },
+  },
+  plugins: [
+    tsConfigPaths(),
+    hypothetical({
+      allowFallthrough: true,
+      files: {
+        ...locales.reduce((acc, file) => ({ ...acc, [file]: 'export default {}' }), {}),
+      },
+    }),
+    minify(),
+    dts(),
+    react(),
+  ],
+})