oddsgate-ds 1.0.11 → 1.0.14

package/docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.7'
+services:
+  storybook:
+    image: node
+    restart: unless-stopped
+    ports:
+      - 6006:6006
+    volumes:
+      - .:/var/www
+    working_dir: /var/www
+    command: sh -c 'yarn install && yarn storybook'

package/package.json

@@ -1,9 +1,7 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.11",
-  "type": "module",
-  "author": "Rui Correia <rui.correia@miew.pt>",
-  "license": "MIT",
+  "version": "1.0.14",
+  "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -16,58 +14,80 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "npm run clean && tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "bump-version": "npm version patch --no-git-tag-version",
-    "preview": "vite preview",
+    "build": "npm run clean && rollup -c --bundleConfigAsCjs",
     "storybook": "storybook dev -p 6006",
-    "clean": "rimraf dist",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "bump-version": "npm version patch --no-git-tag-version",
+    "lint:css": "stylelint './src/**/*.tsx'",
+    "clean": "rimraf dist"
   },
-  "dependencies": {
-    "blaze-slider": "^1.9.3",
-    "formik": "^2.4.6",
-    "styled-components": "^6.1.9"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wearemiew/miewtheme-ds.git"
   },
+  "author": "Rui Correia <rui.correia@miew.pt>",
+  "license": "MIT",
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.3",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/addon-onboarding": "^8.0.10",
-    "@storybook/addon-themes": "^8.0.10",
-    "@storybook/blocks": "^8.0.10",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-vite": "^8.0.10",
-    "@storybook/test": "^8.0.10",
-    "@types/node": "^20.12.8",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.19",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-sucrase": "^5.0.1",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-styling": "^1.3.2",
+    "@storybook/blocks": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/testing-library": "^0.1.1-future.2",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "babel-plugin-styled-components": "^2.1.4",
-    "classnames": "^2.5.1",
-    "esbuild": "^0.20.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint-plugin-storybook": "^0.8.0",
-    "react-svg": "^16.1.34",
-    "rollup-plugin-hypothetical": "^2.1.1",
-    "storybook": "^8.0.10",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.5",
-    "uuid": "^9.0.1",
-    "vite": "^5.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "xss": "^1.0.15"
+    "cs-loader": "^0.0.1",
+    "file-loader": "^6.2.0",
+    "postcss": "^8.4.24",
+    "postcss-styled-syntax": "^0.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^3.23.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-copy-assets": "^2.0.3",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-font": "^1.1.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-static-import": "^1.0.0",
+    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.1",
+    "storybook": "^7.0.18",
+    "style-loader": "^3.3.3",
+    "stylelint": "^15.10.2",
+    "stylelint-config-standard": "^34.0.0",
+    "tslib": "^2.5.2",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-url": "^8.0.1",
+    "blaze-slider": "^1.9.3",
+    "classnames": "^2.3.2",
+    "formik": "^2.4.2",
+    "prop-types": "^15.8.1",
+    "react-player": "^2.14.0",
+    "react-svg": "^16.1.17",
+    "styled-components": "^6.0.2",
+    "uuid": "^9.0.0",
+    "xss": "^1.0.14"
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
+    "react-dom": "18.2.0"
+  },
+  "bugs": {
+    "url": "https://github.com/wearemiew/ventura-ds/issues"
+  },
+  "homepage": "https://github.com/wearemiew/ventura-ds#readme"
 }

package/prettier.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  arrowParens: "avoid",
+  trailingComma: "none",
+  endOfLine: "auto",
+};

package/rollup.config.js

@@ -0,0 +1,90 @@
+// import { babel } from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import copy from 'rollup-plugin-copy'
+import dts from 'rollup-plugin-dts'
+import json from '@rollup/plugin-json'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
+import replace from '@rollup/plugin-replace'
+import resolve from '@rollup/plugin-node-resolve'
+import styles from "rollup-plugin-styles";
+import { terser } from 'rollup-plugin-terser'
+import typescript from '@rollup/plugin-typescript'
+
+const packageJson = require('./package.json')
+const path = require('path')
+
+const rootImport = options => ({
+  resolveId: (importee, importer) => {
+    if (importee[0] === '/') {
+      const rootPath = `${options.root}${importee}.js`
+      const absPath = path.resolve(__dirname, rootPath)
+      console.log(importee)
+      // return fs.existsSync(absPath) ? absPath : null
+    }
+    return null
+  }
+})
+
+export default [
+  {
+    input: './src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+        interop: 'compat',
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+        interop: 'compat',
+      }
+    ],
+    plugins: [
+      peerDepsExternal(),
+      postcss({
+        sourceMap: true,
+        extract: true,
+        minimize: true,
+        use: ['sass']
+      }),
+      styles(),
+      //babel({ babelHelpers: 'bundled' }),
+      resolve(),
+      json(),
+      commonjs(),
+      terser(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      copy({
+        targets: [
+          {
+            src: 'public/*',
+            dest: 'dist/public'
+          },
+          { src: 'public/assets/components', dest: 'dist/esm/assets' },
+          { src: 'public/assets/components', dest: 'dist/cjs/assets' }
+        ],
+        verbose: true
+      }),
+      rootImport({
+        root: 'dist/public'
+      }),
+      replace({
+        preventAssignment: true,
+        values: {
+          '/fonts': 'dist/public/fonts',
+          '/assets/': 'dist/public/assets/'
+        }
+      })
+    ],
+    external: ['react', 'react-dom', 'storybook', 'styled-components']
+  },
+  // {
+  //   input: './src/index.ts',
+  //   output: [{ file: './dist/types.d.ts', format: 'es' }],
+  //   plugins: [dts.default()]
+  // }
+]

package/src/components/atoms/Button/Button.theme.ts

@@ -47,7 +47,7 @@ export const StyledButton = styled.a<IButtonSC>`
         return css`
             ${fontSize('h6')};
 
-           & i{
+            & i{
               width: 3rem;
               height: 3rem;
               line-height: 3rem;
@@ -74,7 +74,7 @@ export const StyledButton = styled.a<IButtonSC>`
             }
 
             ${props.$mode === "dark" ? `
-              color: ${colors.primary10};
+              color: ${colors.deepblue};
               ` : `
               color: ${colors.white};
             `}
@@ -93,7 +93,7 @@ export const StyledButton = styled.a<IButtonSC>`
 
 
           ${props.$mode === "dark" ? `
-            color: ${colors.primary10};
+            color: ${colors.deepblue};
             ` : `
             color: ${colors.white};
           `}

package/src/components/atoms/Chip/Chip.stories.tsx

@@ -15,7 +15,7 @@ export default {
 
 export const Dark: StoryObj<IChip> = {
   render: args => (
-    <div className="bg-primary90 p-6">
+    <div className="bg-primary70 p-6">
       <Chip {...args}>Category name</Chip>
     </div>
   ),

package/src/components/atoms/EmptyState/EmptyState.stories.tsx

@@ -23,7 +23,7 @@ export const Light: StoryObj<IEmptyState> = {
 
 export const Dark: StoryObj<IEmptyState> = {
   render: args => (
-    <div className="bg-primary90 color-white p-8">
+    <div className="bg-primary70 color-white p-8">
       <EmptyState {...args}></EmptyState>
     </div>
   ),

package/src/components/atoms/EmptyState/EmptyState.theme.ts

@@ -19,7 +19,7 @@ export const StyledEmptyState = styled.div<IEmptyState>`
       case "light":
         return css`
           & svg path{
-            fill: ${colors.primary90} !important;
+            fill: ${colors.primary70} !important;
           }
         `;
     }

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts

@@ -94,8 +94,8 @@ export const StyledCheckRadioField = styled.div<ICheckRadioField>`
 
   & input[type="checkbox"]:checked+label::before,
   & input[type="radio"]:checked+label::before {
-    border-color: ${colors.primary90};
-    background: ${colors.primary90};
+    border-color: ${colors.primary70};
+    background: ${colors.primary70};
   }
 
   & input[type="checkbox"]:checked+label::after,
@@ -107,13 +107,13 @@ export const StyledCheckRadioField = styled.div<ICheckRadioField>`
   .style-dark & {
     & input[type="checkbox"]+label {
       &:after {
-        border-color: ${colors.primary90};
+        border-color: ${colors.primary70};
       }
     }
 
     & input[type="radio"]+label {
       &::after {
-        background: ${colors.primary90};
+        background: ${colors.primary70};
       }
     }
     & input[type="checkbox"]:checked+label::before,

package/src/components/atoms/FormField/FormField.stories.tsx

@@ -198,7 +198,7 @@ export const FilterWithInputs: StoryObj<IFormField> = {
 
 export const DarkStyle: StoryObj<IFormField> = {
   render: args => (
-    <div className="style-dark color-white bg-primary90">
+    <div className="style-dark color-white bg-primary70">
       <Formik
         initialValues={{}}
         onSubmit={function (

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -70,7 +70,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
         outline: none;
         width: 100%;
 
-        border: 1px solid ${colors.primary90};
+        border: 1px solid ${colors.primary70};
 
         &:focus {
           border: 1px solid ${colors.gray50};
@@ -79,7 +79,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
 
       select{
         option{
-          color: ${colors.primary90};
+          color: ${colors.primary70};
         }
       }
 

package/src/components/atoms/Heading/Heading.component.tsx

@@ -1,11 +1,12 @@
-import { IHeading } from './Heading.interface';
 import React from 'react';
+
+import { IHeading } from './Heading.interface';
 import { StyledHeading } from './Heading.theme';
 
 const Heading = ({ tag = "h3", size, className, ...props }: IHeading) => {
   return (
     <StyledHeading
-      as={tag as React.ElementType}
+      as={tag}
       size={size}
       className={className}
       {...props}

package/src/components/atoms/ImageWrapper/ImageWrapper.theme.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { css, styled } from 'styled-components';
 
 import { IImageWrapper } from './ImageWrapper.interface';
 

package/src/components/atoms/Loader/Loader.stories.tsx

@@ -22,7 +22,7 @@ export const Light: StoryObj<ILoader> = {
 }
 export const Dark: StoryObj<ILoader> = {
   render: args => (
-    <div className="bg-primary90 color-white p-8">
+    <div className="bg-primary70 color-white p-8">
       <Loader {...args}></Loader>
     </div>
   ),

package/src/components/atoms/Loader/Loader.theme.ts

@@ -63,10 +63,10 @@ export const StyledLoader = styled.div<ILoader>`
         return css`
           & > div {
             &::before{
-              border: 3px dotted ${colors.primary90};
+              border: 3px dotted ${colors.primary70};
             }
             &::after {
-              border: 3px dotted ${colors.primary90};
+              border: 3px dotted ${colors.primary70};
             }
           }
         `;

package/src/components/atoms/Marquee/Marquee.theme.ts

@@ -16,7 +16,7 @@ export const StyledMarquee = styled.div<IMarquee>`
   --move-final: calc(-50% + var(--offset));
 
   color: ${colors.white};
-  background-color: ${colors.primary90};
+  background-color: ${colors.primary70};
   border-radius: ${radius.md};
 
   padding: 8px 0;

package/src/components/atoms/Separator/Separator.stories.tsx

@@ -9,14 +9,14 @@ export default {
   title: 'Components/Separator',
   component: Separator,
   tags: ['autodocs'],
-  // argTypes: {
-  //   height: {
-  //     control: 'text'
-  //   },
-  //   color: {
-  //     control: 'colorpicker'
-  //   }
-  // }
+  argTypes: {
+    height: {
+      control: 'text'
+    },
+    color: {
+      control: 'colorpicker'
+    }
+  }
 } as Meta
 
 export const Simple: StoryObj<ISeparator> = {

package/src/components/atoms/SocialLinks/SocialLinks.theme.ts

@@ -37,13 +37,13 @@ export const StyledSocialLinks = styled.ul<ISocialLinks>`
         return css`
           & li a{
             color: ${colors.white};
-            background-color: ${colors.primary90};
+            background-color: ${colors.primary70};
           }
         `;
       case "dark":
         return css`
           & li a{
-            color: ${colors.primary90};
+            color: ${colors.primary70};
             background-color: ${colors.white};
           }
         `;

package/src/components/atoms/Spacer/Spacer.stories.tsx

@@ -9,14 +9,14 @@ export default {
   title: 'Components/Spacer',
   component: Spacer,
   tags: ['autodocs'],
-  // argTypes: {
-  //   height: {
-  //     control: 'text'
-  //   },
-  //   color: {
-  //     control: 'colorpicker'
-  //   }
-  // }
+  argTypes: {
+    height: {
+      control: 'text'
+    },
+    color: {
+      control: 'colorpicker'
+    }
+  }
 } as Meta
 
 export const Simple: StoryObj<ISpacer> = {

package/src/components/molecules/BlogCard/BlogCard.theme.ts

@@ -37,8 +37,8 @@ export const StyledBlogCard = styled(Card) <IBlogCard>`
       font-size: 2.6rem;
 
       border-radius: 50px;
-      color: ${colors.primary10};
-      background-color: ${colors.primary30};
+      color: ${colors.deepblue};
+      background-color: ${colors.softgreen};
 
       transition: all 0.3s linear;
       transform: rotateZ(-45deg);

package/src/components/molecules/Dropdown/Dropdown.theme.ts

@@ -14,7 +14,7 @@ export const StyledDropdownTitle = styled.div<IDropdownTitle>`
   cursor: pointer;
 
   ${({ open }) => open && `
-    color: ${colors.primary90} !important;
+    color: ${colors.primary70} !important;
     user-select: none
   `}
 `;
@@ -45,6 +45,6 @@ export const StyledDropdownItem = styled.li<IDropdownItem>`
   cursor: pointer;
 
   &:hover {
-    color: ${colors.primary90}
+    color: ${colors.primary70}
   }
 `;

package/src/components/molecules/IconBox/IconBox.theme.ts

@@ -14,7 +14,7 @@ export const StyledIconBox = styled.div<IIconBox>`
     width: 32px;
     height: 32px;
 
-    color: ${colors.primary90};
+    color: ${colors.primary70};
     background: ${colors.primary10};
     border-radius: 50px;
 

package/src/components/molecules/Modal/Modal.theme.ts

@@ -44,7 +44,7 @@ export const StyledWrapper = styled.div<IModal>`
 
 export const StyledTitle = styled.div<IModal>`
   color: ${colors.white};
-  background-color: ${colors.primary90};
+  background-color: ${colors.primary70};
   padding: ${spaces[3]};
 `;
 

package/src/components/molecules/ProjectCard/ProjectCard.theme.ts

@@ -37,8 +37,8 @@ export const StyledProjectCard = styled(Card) <IProjectCard>`
       font-size: 2.6rem;
 
       border-radius: 50px;
-      color: ${colors.primary10};
-      background-color: ${colors.primary30};
+      color: ${colors.deepblue};
+      background-color: ${colors.softgreen};
 
       transition: all 0.3s linear;
       transform: rotateZ(-45deg);

package/src/components/molecules/ShareModal/ShareModal.theme.ts

@@ -20,7 +20,7 @@ export const StyledModal = styled.div<IShareModal>`
       line-height: 3.2rem;
       border-radius: 50%;
       color: ${colors.white};
-      background: ${colors.primary90};
+      background: ${colors.primary70};
       margin: auto;
       transition: all 0.3s ease;
 
@@ -79,7 +79,7 @@ export const StyledMessage = styled.div<IShareModal>`
   vertical-align: top;
 
   color: ${colors.white};
-  background-color: ${colors.primary90};
+  background-color: ${colors.primary70};
 
   cursor: pointer;
   padding: ${spaces[2]} ${spaces[4]};

package/src/helpers/exportCSS.tsx

@@ -0,0 +1,27 @@
+import { default as GlobalStyles } from '../styles/Global'
+import React from 'react'
+import { ServerStyleSheet } from 'styled-components'
+import { renderToString } from 'react-dom/server'
+import { useState } from 'react'
+
+const ReturnCss = () => {
+  const sheet = new ServerStyleSheet()
+
+  const html = renderToString(sheet.collectStyles(<GlobalStyles />))
+  const styleTags = sheet.getStyleElement()
+  sheet.instance.clearTag()
+
+  return styleTags[0]
+}
+
+export default ReturnCss
+
+export const ReturnCssString = () => {
+  const sheet = new ServerStyleSheet()
+
+  const html = renderToString(sheet.collectStyles(<GlobalStyles />))
+  const styleTags = sheet.getStyleElement()
+  sheet.instance.clearTag()
+
+  return styleTags[0].props.dangerouslySetInnerHTML.__html
+}

package/src/styles/Global.ts

@@ -256,7 +256,7 @@ const GlobalStyles = createGlobalStyle`
 
     padding: 12px 22px;
 
-    color: var(--color-primary90);
+    color: var(--color-primary70);
     background: var(--color-white);
     box-shadow: 0px 2px 16px rgba(${colors.black}, 0.05);
     border-radius: 50px;

package/src/styles/variables.ts

@@ -2,8 +2,8 @@ export const pxToRem = (size: number) => {
   return (size / 16) * 1 + 'rem'
 }
 
-export const fontName = "Noto Sans"
-export const alternativeFont = "";
+export const fontName = "Red Hat Display"
+export const alternativeFont = "MD Nichrome";
 
 export const gutter = pxToRem(8); //needs to be in this file
 
@@ -86,17 +86,17 @@ export const typography = <Record<string, Record<string, unknown>>>{
   display: {
     size: pxToRem(250),
     sizeMob: pxToRem(180),
-    height: 1.4,
+    height: 1.2,
   },
   h1: {
     size: pxToRem(120),
     sizeMob: pxToRem(64),
-    height: 1.4,
+    height: 1.2,
   },
   h2: {
     size: pxToRem(80),
     sizeMob: pxToRem(42),
-    height: 1.4,
+    height: 1.2,
   },
   h3: {
     size: pxToRem(48),
@@ -106,7 +106,7 @@ export const typography = <Record<string, Record<string, unknown>>>{
   h4: {
     size: pxToRem(36),
     sizeMob: pxToRem(20),
-    height: 1.4,
+    height: 1.2,
   },
   h5: {
     size: pxToRem(20),