First commit, added default theming + Icons + Buttons

.dockerignore

@@ -0,0 +1 @@
+node_modules

.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+storybook-static
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

.storybook/main.js

@@ -0,0 +1,18 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-designs",
+    "storybook-dark-mode",
+    "@react-theming/storybook-addon"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,99 @@
+
+import { addDecorator, addParameters } from "@storybook/react";
+import { ThemeProvider, ThemeContext } from 'styled-components';
+import { themes as theming } from '@storybook/theming';
+import { withThemes } from '@react-theming/storybook-addon';
+
+import { themes, themeList } from '../src/themes';
+import { GlobalStyle } from '../src/styles';
+import logoDark from '../assets/img/aleph-dark.svg';
+import logoLight from '../assets/img/aleph-light.svg';
+
+function getThemeColors(theme) {
+  const { color } = theme;
+
+  return {
+    brandTitle: 'Aleph.im Components',
+    brandUrl: 'https://aleph.im/',
+    brandImage: theme.name.toLowerCase().indexOf('light') !== -1 ? logoLight : logoDark,
+    appBg: color.background,
+    appContentBg: color.contentBackground,
+    barBg: color.foreground,
+    inputBg: color.foreground,
+    barSelectedColor: color.secondary,
+    colorPrimary: color.primary,
+    colorSecondary: color.secondary,
+    brandTarget: '_blank'
+    // appBorderColor?: string;
+    // appBorderRadius?: number;
+    // fontBase?: string;
+    // fontCode?: string;
+    // textColor?: string;
+    // textInverseColor?: string;
+    // textMutedColor?: string;
+    // barTextColor?: string;
+    // inputBorder?: string;
+    // inputTextColor?: string;
+    // inputBorderRadius?: number;
+    // gridCellSize?: number;
+  }
+}
+
+// All stories expect a theme arg
+export const argTypes = {
+  size: { control: { type: 'inline-radio' } },
+  color: { control: { 
+    type: 'color',
+    presetColors: Object.entries(themes.alephDark.color).map(([title, color]) => ({ title, color }))
+   } },
+};
+
+// The default value of the theme arg to all stories
+export const args = {
+  size: 'lg',
+  color: 'white'
+};
+
+const onThemeSwitch = context => {
+  const { theme } = context;
+  const background = theme.color.background
+
+  return {
+    parameters: {
+      backgrounds: {
+        default: background,
+      },
+      // Pass backgrounds: null to disable background switching at all
+    }
+  }
+};
+
+
+addParameters({
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: { disable: true },
+  darkMode: {
+    // Override the default dark theme
+    dark: {
+      ...theming.dark,
+      ...getThemeColors(themes.alephDark)
+    },
+    // Override the default light theme
+    light: {
+      ...theming.normal,
+      ...getThemeColors(themes.alephLight)
+    }
+  }
+})
+
+const themingDecorator = withThemes(ThemeProvider, themeList, { onThemeSwitch });
+const globalCssDecorator = (story) => <><GlobalStyle />{story()}</>
+
+addDecorator(globalCssDecorator);
+addDecorator(themingDecorator);

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:16-alpine as build-stage
+WORKDIR /app
+
+# Install deps
+COPY [".npmrc", "package.json", "package-lock.json*", "./"]
+ARG FONTAWESOME_NPM_AUTH_TOKEN
+RUN npm ci
+
+# Build app
+COPY . .
+RUN npm run build-storybook
+
+# production stage
+FROM nginx:1.21.3-alpine as production-stage
+
+COPY --from=build-stage /app/storybook-static /usr/share/nginx/html
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -0,0 +1,8 @@
+# Aleph.im frontend core package
+
+## Get started as developer
+
+### Set up font awesome in your local environment
+
+Before start, obtain a valid package token and set the env var `FONTAWESOME_NPM_AUTH_TOKEN` 
+Follow [this guide](https://fontawesome.com/docs/web/setup/packages#set-up-npm-token-for-all-projects) for configuring your local npm config