Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-core-ui/src/stories/design-tokens/_01_colors.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+import { ThemeColorPaletteSheet, BaseColorPaletteSheet } from './_01_colors_palettes';
+
+<Meta title="Design Tokens/01. Colors" />
+
+# Colors
+
+## Theme Colors
+
+<ThemeColorPaletteSheet />
+
+## Base Colors
+
+Base colors shouldn't be used in components, use Theme colors instead.
+
+<BaseColorPaletteSheet />

packages/noodl-core-ui/src/stories/design-tokens/_01_colors_palettes.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { base_color_names, theme_color_names } from '@noodl-core-ui/styles/colors';
+import { ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+
+// https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
+function allCSSVariables() {
+  const isSameDomain = (styleSheet) => {
+    // Internal style blocks won't have an href value
+    if (!styleSheet.href) {
+      return true;
+    }
+    return styleSheet.href.indexOf(window.location.origin) === 0;
+  };
+  const isStyleRule = (rule) => rule.type === 1;
+  return [...document.styleSheets].filter(isSameDomain).reduce(
+    (finalArr, sheet) =>
+      finalArr.concat(
+        // cssRules is array-like, so we convert it to an array
+        [...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
+          // @ts-expect-error
+          const props = [...rule.style]
+            // @ts-expect-error
+            .map((propName) => [propName.trim(), rule.style.getPropertyValue(propName).trim()])
+            // Discard any props that don't start with "--". Custom props are required to.
+            .filter(([propName]) => propName.indexOf('--') === 0);
+
+          return [...propValArr, ...props];
+        }, [])
+      ),
+    []
+  );
+}
+
+export function getColorsFromCSSVar(keys: { [key: string]: string }) {
+  return allCSSVariables().reduce((result, [key, value]) => {
+    const base_color = Object.keys(keys).find((x) => key.startsWith(x));
+    if (base_color) {
+      if (!result[base_color]) {
+        result[base_color] = {
+          name: keys[base_color],
+          items: []
+        };
+      }
+      result[base_color].items.push({
+        key: key,
+        prefix: key.substring(base_color.length + 1),
+        value
+      });
+    }
+    return result;
+  }, {});
+}
+
+export function BaseColorPaletteSheet() {
+  const colors = getColorsFromCSSVar(base_color_names);
+
+  return (
+    <ColorPalette>
+      {Object.keys(colors).map((key) => (
+        <ColorItem
+          key={key}
+          title={colors[key].name}
+          subtitle={key + '-<code>'}
+          colors={colors[key].items.reduce((result, x) => {
+            result[x.prefix] = x.value;
+            return result;
+          }, {})}
+        />
+      ))}
+    </ColorPalette>
+  );
+}
+
+export function ThemeColorPaletteSheet() {
+  const colors = getColorsFromCSSVar(theme_color_names);
+
+  return (
+    <ColorPalette>
+      {Object.keys(colors).map((key) => (
+        <ColorItem
+          key={key}
+          title={colors[key].name}
+          subtitle={key + '-<code>'}
+          colors={colors[key].items.reduce((result, x) => {
+            result[x.prefix] = x.value;
+            return result;
+          }, {})}
+        />
+      ))}
+    </ColorPalette>
+  );
+}

packages/noodl-core-ui/src/stories/design-tokens/_02_typography.stories.mdx

@@ -0,0 +1,43 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+
+<Meta title="Design Tokens/02. Typography" />
+
+# Typography
+
+## Inter
+
+<Typeset
+  fontSizes={[
+    Number(12),
+    Number(14),
+    Number(16),
+    Number(20),
+    Number(24),
+    Number(28),
+    Number(32),
+    Number(40),
+    Number(48),
+  ]}
+  fontWeight={500}
+  sampleText={'Over the horizon comes the break of dawn.'}
+  fontFamily={'Inter'}
+/>
+
+## Poppins
+
+<Typeset
+  fontSizes={[
+    Number(12),
+    Number(14),
+    Number(16),
+    Number(20),
+    Number(24),
+    Number(28),
+    Number(32),
+    Number(40),
+    Number(48),
+  ]}
+  fontWeight={500}
+  sampleText={'Over the horizon comes the break of dawn.'}
+  fontFamily={'Poppins'}
+/>

packages/noodl-core-ui/src/stories/design-tokens/_03_icons.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
+import { Icon, IconName } from '../../components/common/Icon';
+
+<Meta title="Design Tokens/03. Icons" />
+
+# Iconography
+
+<IconGallery>
+  {Object.entries(IconName).map(([iconName, iconValue]) => (
+    <IconItem key={iconName} name={iconName}>
+      <Icon icon={iconValue} />
+    </IconItem>
+  ))}
+</IconGallery>

packages/noodl-core-ui/src/stories/hooks/useAutofocusInput.stories.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { TextInput } from '@noodl-core-ui/components/inputs/TextInput';
+import { useAutofocusInput } from '@noodl-core-ui/hooks/useAutofocusInput';
+
+export default {
+  title: 'Hooks/useAutofocusInput',
+  component: TextInput,
+  argTypes: {}
+} as ComponentMeta<typeof TextInput>;
+
+const Template: ComponentStory<typeof TextInput> = () => {
+  const setRef = useAutofocusInput();
+  const [secondInputState, setSecondInputState] = useState('Focus me manually');
+
+  return (
+    <>
+      <TextInput onRefChange={setRef} value="Unmutable value makes this story cleaner" />
+      <TextInput value={secondInputState} onChange={(e) => setSecondInputState(e.target.value)} />
+    </>
+  );
+};
+
+export const Common = Template.bind({});
+Common.args = {};