@ilo-org/react 0.14.0 → 0.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -9,6 +9,9 @@
     "designsystem",
     "components"
   ],
+  "files": [
+    "lib/**/*"
+  ],
   "contributors": [
     {
       "name": "Justin Smith",
@@ -95,12 +98,12 @@
     "react-transition-group": "^4.4.1",
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
-    "@ilo-org/brand-assets": "0.5.0",
-    "@ilo-org/fonts": "0.2.0",
-    "@ilo-org/icons-react": "0.1.0",
-    "@ilo-org/styles": "0.16.0",
-    "@ilo-org/themes": "0.8.0",
-    "@ilo-org/utils": "0.1.0"
+    "@ilo-org/brand-assets": "0.5.1",
+    "@ilo-org/fonts": "0.2.1",
+    "@ilo-org/icons-react": "0.1.1",
+    "@ilo-org/styles": "0.16.1",
+    "@ilo-org/themes": "0.8.1",
+    "@ilo-org/utils": "0.1.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -153,9 +156,9 @@
     "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",
     "vite": "^4.5.2",
-    "@ilo-org/eslint-config": "0.2.0",
-    "@ilo-org/prettier-config": "0.1.0",
-    "@ilo-org/typescript-config": "0.1.0"
+    "@ilo-org/eslint-config": "0.2.1",
+    "@ilo-org/prettier-config": "0.1.1",
+    "@ilo-org/typescript-config": "0.1.1"
   },
   "peerDependencies": {
     "react": ">16",

package/.eslintrc.cjs

@@ -1,39 +0,0 @@
-/**
- * Package-level eslint config extends the global config and applies
- * customizations relative to the local project. In this example we
- * are lintinting both js and ts files, so we combine two configs
- * and set the TypeScript settings as an override
- */
-module.exports = {
-  /* =============== */
-  /* Global Settings */
-  /* =============== */
-  root: true,
-  extends: ["@ilo-org/eslint-config"],
-  // Extend the default config and add any specific settings for this project
-  ignorePatterns: [
-    "storybook-static/",
-    "node_modules/",
-    "lib/",
-    "src/stories/",
-    //@TODO: Remove this once type errors in tests and args files are fixed
-    "src/__tests__",
-    "src/components/**/*.args.ts",
-  ],
-
-  overrides: [
-    /* =================== */
-    /* TypeScript Settings */
-    /* =================== */
-    {
-      // Which files the override will apply to relative to the package root
-      files: ["**/*.{ts,tsx}"],
-      extends: ["@ilo-org/eslint-config/typescript"],
-      // The typescript parser options for this package, which will be different
-      // from other packages
-      parserOptions: {
-        project: ["./tsconfig.json"],
-      },
-    },
-  ],
-};

package/.storybook/main.ts

@@ -1,41 +0,0 @@
-export const core = {
-  disableTelemetry: true,
-  builder: "@storybook/builder-vite",
-};
-
-export const framework = {
-  name: "@storybook/react-vite",
-};
-
-export const stories = [
-  "../src/stories/**/*.mdx",
-  "../src/stories/**/*.stories.@(js|jsx|ts|tsx)",
-];
-
-export const docs = {
-  defaultName: "Overview",
-  autodocs: "tag",
-};
-
-export const staticDirs = [
-  "../public",
-  { from: "../node_modules/@ilo-org/fonts/font-css", to: "/fonts" },
-];
-
-export const addons = [
-  "@storybook/addon-links",
-  "@storybook/addon-essentials",
-  "@storybook/addon-a11y",
-  "@storybook/addon-styling",
-  "storybook-addon-rtl-direction",
-];
-
-export const typescript = {
-  reactDocgen: "react-docgen-typescript",
-  reactDocgenTypescriptOptions: {
-    compilerOptions: {
-      allowSyntheticDefaultImports: true,
-      esModuleInterop: true,
-    },
-  },
-};

package/.storybook/manager-head.html

@@ -1,92 +0,0 @@
-<!-- .storybook/manager-head.html -->
-<style>
-  @import url("/fonts/fonts-google.css");
-  @import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
-</style>
-
-<!-- Canonical URL -->
-
-<link href="https://react.ui.ilo.org" rel="canonical" />
-
-<!-- Favicon -->
-<link rel="icon" href="/favicon.ico" type="image/x-icon" />
-
-<style>
-  :root {
-    --ilo-white: #fff;
-    --ilo-dark-blue: #230050;
-    --ilo-light-blue: #ffcd2d;
-    --ilo-turquoise: #05d2d2;
-    --ilo-purple: #960a55;
-    --ilo-light-blue: rgba(235, 245, 253, 1);
-  }
-
-  body {
-    font-family: "Noto Sans", sans-serif;
-  }
-
-  a[id*="overview"] > svg {
-    color: var(--ilo-purple);
-    font-family: "Overpass", sans-serif;
-  }
-
-  a:not[id*="overview"] > svg {
-    color: var(--ilo-turquoise);
-  }
-
-  /* Remount component */
-  button[title="Remount component"]:hover,
-  button[title="Zoom in"]:hover,
-  button[title="Zoom out"]:hover,
-  button[title="Reset zoom"]:hover,
-  button[title="Change the background of the preview"]:hover,
-  button[title="Apply a grid to the preview"]:hover,
-  button[title="Change the size of the preview"]:hover,
-  button[title="Enable measure"]:hover,
-  button[title="Apply outlines to the preview"]:hover,
-  button[title="Vision simulator"]:hover,
-  button[title="Go full screen [F]"]:hover,
-  a[title="Open canvas in new tab"]:hover,
-  button[title="Copy canvas link"]:hover {
-    color: var(--ilo-dark-blue);
-    background-color: var(--ilo-light-blue);
-  }
-
-  button.sto-1qova3h,
-  button.sto-4f61h0,
-  button[title="Rotate viewport"]:hover {
-    color: var(--ilo-light-blue);
-  }
-
-  button.tabbutton:active,
-  button.tabbutton:focus {
-    border-bottom-color: var(--ilo-light-blue);
-  }
-
-  .realm {
-    width: 100%;
-    background: transparent;
-    box-sizing: border-box;
-    text-align: left;
-    font-size: 0.8rem;
-    border-top: 1px solid #d3dce3;
-    padding-top: 15px;
-    color: #1e2dbe;
-    font-weight: 600;
-    font-family: "Nunito Sans", sans-serif;
-    margin-top: -10px;
-  }
-</style>
-
-<script>
-  window.addEventListener("load", function () {
-    const sidebar = document.querySelector(".sidebar-header");
-    const customLabel = document.createElement("div");
-    customLabel.classList.add("realm");
-    customLabel.textContent = "React Components";
-
-    if (sidebar) {
-      sidebar.insertAdjacentElement("afterend", customLabel);
-    }
-  });
-</script>

package/.storybook/manager.ts

@@ -1,6 +0,0 @@
-import { addons } from "@storybook/manager-api";
-import { theme } from "./theme";
-
-addons.setConfig({
-  theme: theme,
-});

package/.storybook/preview-head.html

@@ -1,5 +0,0 @@
-<style>
-  .story-decorator {
-    padding-top: 2rem;
-  }
-</style>

package/.storybook/preview.tsx

@@ -1,81 +0,0 @@
-import { GlobalProvider } from "../src/components/GlobalProvider";
-import { themeprefix } from "@ilo-org/themes/tokens/theme/base.json";
-import { Decorator } from "@storybook/react";
-import { theme } from "./theme";
-import "./styles.scss";
-import { brand } from "@ilo-org/themes/tokens/brand/base.json";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    expanded: true,
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  options: {
-    storySort: {
-      method: "alphabetical",
-      order: ["Welcome", "GettingStarted"],
-      locales: "en-US",
-    },
-  },
-  backgrounds: {
-    values: [
-      { name: "light", value: "white" },
-      { name: "dark", value: brand["ilo-dark-blue"].value },
-    ],
-  },
-  previewTabs: {
-    "storybook/docs/panel": { index: -1 },
-    canvas: { title: "Code", hidden: false },
-  },
-  viewMode: "docs",
-  layout: "padded",
-  docs: {
-    theme: theme,
-    source: {
-      excludeDecorators: true,
-    },
-  },
-};
-
-export const decorators: Decorator[] = [
-  // Providces the GlobalProvider context to all stories
-  (Story) => (
-    <GlobalProvider prefix={themeprefix.value}>
-      <Story />
-    </GlobalProvider>
-  ),
-  // Wraps components in story mode
-  (Story, ctx) => {
-    // Should this story be rendered in full width?
-    const fullWidthStories = ["footer", "localnav", "navigation", "hero"];
-    const isFullWidth = fullWidthStories.some((story) =>
-      ctx.title.toLocaleLowerCase().includes(story)
-    );
-
-    if (ctx.viewMode === "story") {
-      if (isFullWidth) {
-        return <Story />;
-      }
-
-      return (
-        <div className="story-decorator-wrapper ">
-          <div className="story-decorator">
-            <Story />
-          </div>
-        </div>
-      );
-    }
-    return <Story />;
-  },
-];
-
-export const globalTypes = {
-  rtlDirection: {
-    description: "HTML dir attribute",
-    defaultValue: false,
-  },
-};

package/.storybook/styles.scss

@@ -1,25 +0,0 @@
-@import "@ilo-org/themes/build/scss/tokens";
-@import "@ilo-org/styles/scss/monorepo";
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-family: "Overpass", sans-serif !important;
-}
-
-button[title="Zoom in"]:hover,
-button[title="Zoom out"]:hover,
-button[title="Reset zoom"]:hover {
-  color: $brand-ilo-dark-blue;
-  background-color: $brand-ilo-light-blue;
-}
-
-a[class*="ilo--button"] {
-  color: $brand-ilo-dark-blue;
-
-  &:hover {
-    color: $brand-ilo-blue;
-  }
-}

package/.storybook/theme.ts

@@ -1,46 +0,0 @@
-// .storybook/YourTheme.js
-
-import { create } from "@storybook/theming/create";
-import ilo_logo from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";
-import brandColors from "@ilo-org/themes/tokens/brand/base.json";
-
-const { brand } = brandColors;
-
-export const theme = create({
-  base: "light",
-  brandTitle: "ILO Design System for React",
-  brandUrl: "https://www.ilo.org/",
-  brandImage: ilo_logo,
-  brandTarget: "_self",
-
-  colorPrimary: brand["ilo-dark-blue"].value,
-  colorSecondary: brand["ilo-blue"].value,
-
-  // UI
-  appBg: brand["ilo-light-blue"].value,
-  appContentBg: brand["ilo-white"].value,
-  appBorderColor: brand["ilo-grey-ui"].value,
-  appBorderRadius: 0,
-
-  fontBase: "'Noto Sans', sans-serif",
-  fontCode: "'Fira Code', monospace",
-
-  // Text colors
-  textColor: brand["ilo-dark-blue"].value,
-  textInverseColor: brand["ilo-white"].value,
-  textMutedColor: brand["ilo-grey-accessible"].value,
-
-  // Toolbar default and active colors
-  barTextColor: brand["ilo-white"].value,
-  barSelectedColor: brand["ilo-yellow"].value,
-  barBg: brand["ilo-dark-blue"].value,
-
-  buttonBg: brand["ilo-white"].value,
-  buttonBorder: brand["ilo-grey-ui"].value,
-  booleanBg: brand["ilo-light-blue"].value,
-  booleanSelectedBg: brand["ilo-white"].value,
-  inputBg: brand["ilo-light-blue"].value,
-  inputBorder: brand["ilo-grey-ui"].value,
-  inputTextColor: brand["ilo-dark-blue"].value,
-  inputBorderRadius: 3,
-});

package/.turbo/turbo-build:lib.log

@@ -1,15 +0,0 @@
-
-> @ilo-org/react@0.14.0 build:lib /home/runner/work/designsystem/designsystem/packages/react
-> rollup -c
-
-
-src/index.ts, src/components/**/index.ts, src/components/**/*.tsx, src/hooks/*.ts, src/utils/*.ts → lib/esm, lib/cjs...
-(!) Mixing named and default exports
-https://rollupjs.org/configuration-options/#output-exports
-The following entry modules are using named and default exports together:
-src/components/Fieldset/Fieldset.tsx
-src/components/FormControl/FormControl.tsx
-src/hooks/usePrevious.ts
-
-Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
-created lib/esm, lib/cjs in 16s