@ilo-org/react 0.0.1

package/.eslintrc.js

@@ -0,0 +1,36 @@
+/**
+ * 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/",
+  ],
+
+  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.js

@@ -0,0 +1,28 @@
+const config = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    {
+      name: "@storybook/preset-create-react-app",
+      options: {
+        scriptsPackageName: "react-scripts",
+      },
+    },
+    "@storybook/addon-a11y",
+  ],
+  core: {
+    builder: "webpack5",
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: true,
+        esModuleInterop: true,
+      },
+    },
+  },
+};
+
+module.exports = config;

package/.storybook/manager-head.html

@@ -0,0 +1,7 @@
+<!-- .storybook/manager-head.html -->
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="https://www.ilo.org/wcmsp5/ilo/global/images/templates/favicons/apple-touch-icon-precomposed.png"
+/>

package/.storybook/manager.js

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

package/.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import type { DecoratorFn } from "@storybook/react";
+import { GlobalProvider } from "../src/components/GlobalProvider";
+import { themeprefix } from "@ilo-org/themes/tokens/theme/base.json";
+import "./styles.scss";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+  previewTabs: {
+    "storybook/docs/panel": { index: -1 },
+    canvas: { title: "Code", hidden: false },
+  },
+  viewMode: "docs",
+};
+
+export const decorators: DecoratorFn[] = [
+  (Story) => (
+    <div style={{ margin: "3em" }}>
+      <GlobalProvider prefix={themeprefix.value}>
+        <Story />
+      </GlobalProvider>
+    </div>
+  ),
+];

package/.storybook/styles.scss

@@ -0,0 +1 @@
+@import "@ilo-org/styles/scss";

package/.storybook/theme.js

@@ -0,0 +1,11 @@
+// .storybook/YourTheme.js
+
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "ILO UI Kit",
+  brandUrl: "https://www.ilo.org/",
+  brandImage:
+    "https://www.ilo.org/wcmsp5/ilo/global/images/templates/favicons/apple-touch-icon-precomposed.png",
+});