init

Author: AlmogAdziashvili

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ['plugin:react/recommended', 'standard-with-typescript', 'plugin:storybook/recommended'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  plugins: ['react'],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  rules: {
+    "@typescript-eslint/semi": ["error", "always"],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+  }
+};

.github/workflows/deploy-github-pages.yaml

@@ -0,0 +1,33 @@
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# List of jobs
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # Manual Checkout
+      - uses: actions/checkout@v3
+
+      # Set up Node
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.1
+        with:
+          install_command: yarn install # default: npm ci
+          build_command: yarn build-storybook # default: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # default: true

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+package-lock.json
+storybook-static
+dist
+build-storybook.log

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run precommit

.storybook/main.js

@@ -0,0 +1,12 @@
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/manager-api, @storybook/theming, @storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm", '@storybook/addon-toolbars', '@storybook/addon-designs'],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  docs: {
+    autodocs: "tag"
+  }
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,8 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<style>
+  
+</style>

.storybook/manager.js

@@ -0,0 +1,35 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+const getCssVarStringValue = (varName) => getComputedStyle(document.documentElement).getPropertyValue(varName);
+
+addons.setConfig({
+  theme: {
+    // colorPrimary: getCssVarStringValue('--fui-color-brand'),
+    // colorSecondary: '#2856E0',
+    // appBg: getCssVarStringValue('--fui-color-surface-subdued'),
+    fontBase: '"Inter", sans-serif',
+    fontCode: '"IBM Plex Mono", monospace',
+    // appContentBg: getCssVarStringValue('--fui-color-surface-base'),
+    // // appBorderColor: getCssVarStringValue('--fui-color-divider-solid'),
+    // appBorderRadius: getComputedStyle(document.documentElement).getPropertyValue('--fui-border-radius-lg'),
+    // textColor: getCssVarStringValue('--fui-color-foreground-default'),
+    // textInverseColor: getCssVarStringValue('--fui-color-foreground-inverted'),
+    // // textMutedColor: getCssVarStringValue('--fui-color-foreground-soft'),
+    // barTextColor: getCssVarStringValue('--fui-color-foreground-default'),
+    // barSelectedColor: getCssVarStringValue('--fui-color-foreground-primary'),
+    // barBg: getCssVarStringValue('--fui-color-background-elevated'),
+    // buttonBg: getCssVarStringValue('--fui-disableable-color-button-primary-bg-neutral'),
+    // buttonBorder: getCssVarStringValue('--fui-disableable-color-button-secondary-border-neutral'),
+    // booleanBg: getCssVarStringValue('--fui-disableable-color-background-subdued'),
+    // booleanSelectedBg: getCssVarStringValue('--fui-disableable-color-brand'),
+    // inputBg: getCssVarStringValue('--fui-disableable-color-background-base'),
+    // inputBorder: getCssVarStringValue('--fui-disableable-color-divider-solid'),
+    // inputTextColor: getCssVarStringValue('--fui-color-foreground-default'),
+    // inputBorderRadius: getCssVarStringValue('--fui-border-radius-md'),
+    // brandTitle: 'Functional UI Kit',
+    // brandUrl: 'https://functional-ui-kit.framer.website/',
+    // brandImage: 'https://framerusercontent.com/images/tVkfz6i8rL4iFXxNlvKJhZuM.png',
+    // brandTarget: '_self',
+  }
+});

.storybook/preview-head.html

@@ -0,0 +1,25 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet"
+/>
+<style>
+  html,
+  body,
+  #storybook-root {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background-color: var(--fui-color-surface-base);
+  }
+  .docs-story {
+    background-color: var(--fui-color-surface-base);
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,36 @@
+import '../src/css/main.css';
+import { themes } from '@storybook/theming';
+
+const withThemeProvider = (Story, context) => {
+  document.body.setAttribute('data-theme', context.globals.theme);
+  return Story();
+};
+
+const preview = {
+  decorators: [withThemeProvider],
+  parameters: {
+    backgrounds: { disable: true },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: themes.dark,
+    }, 
+  },
+  globalTypes: {
+    theme: {
+      description: 'Functional UI Kit theme',
+      defaultValue: 'light',
+      toolbar: {
+        items: [{ value: 'light', icon: 'sun', title: 'light' }, { value: 'dark', icon: 'moon', title: 'dark' }],
+      },
+    },
+  },
+
+};
+
+export default preview;

.storybook/theme.js

@@ -0,0 +1,43 @@
+// .storybook/YourTheme.js
+
+import { create } from '@storybook/theming/create';
+
+const getCssVarStringValue = (varName) => getComputedStyle(document.documentElement).getPropertyValue(varName);
+
+export default create({
+  base: 'light',
+  // Typography
+  fontBase: '"Inter", sans-serif',
+  fontCode: '"IBM Plex Mono", monospace',
+
+  brandTitle: 'Functional UI Kit',
+  brandUrl: 'https://functional-ui-kit.com/',
+  brandImage: 'https://framerusercontent.com/images/tVkfz6i8rL4iFXxNlvKJhZuM.png',
+  brandTarget: '_self',
+
+  //
+  colorPrimary: 'red',
+  colorSecondary: '#585C6D',
+
+  // UI
+  appBg: '#ddd',
+  appContentBg: '#ffffff',
+  appBorderColor: getCssVarStringValue('--fui-color-divider-soft'),
+  appBorderRadius: getCssVarStringValue('--fui-border-radius-xlg'),
+
+  // Text colors
+  textColor: '#10162F',
+  textInverseColor: '#ffffff',
+
+  // Toolbar default and active colors
+  barTextColor: '#9E9E9E',
+  barSelectedColor: '#585C6D',
+  barBg: '#ffffff',
+
+  // Form colors
+  inputBg: '#ffffff',
+  inputBorder: getCssVarStringValue('--fui-color-divider-solid'),
+  inputTextColor: '#10162F',
+  inputBorderRadius: getCssVarStringValue('--fui-border-radius-md'),
+  colorPrimary: getCssVarStringValue('--fui-color-brand'),
+});

CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.0.2] - 2023-12-21
+Initial Release 🎉

README.md

@@ -0,0 +1,61 @@
+# Welcome to Functional UI Kit
+
+Functional UI Kit is a professionally crafted design system for product design and development teams and individuals. We provide core components you would need in every project, focusing on accessibility, development experience and unified designer-developer experience.
+
+We've made sure that Figma variables and CSS variables work together effortlessly. They share the same names, usage and inheritance structure. This isn't just an extra feature; it's the core approach.
+
+Each Figma variable has a direct counterpart in CSS, so there's no confusion. Your design ideas stay crystal clear as you move into the development phase.
+
+
+# Setup
+### Install
+Install the latest version from NPM.
+```
+npm install functional-ui-kit
+```
+
+### Setup CSS
+Import the functional-ui-kit CSS file into your project in your css file
+```css
+@import 'practical-ui-kit/style';
+
+html {
+  ...
+```
+you can also import the CSS file directly into your main React App file
+```js
+import React, { Component } from 'react'
+import 'practical-ui-kit/style';
+
+class App extends Component {
+  ...
+```
+
+### Customizing Theme
+You can customize the theme by overriding the CSS variables. You can find the list of variables in the [theme file](/docs/theming--docs)
+```css
+:root {
+  --fui-color-brand: var(--fui-color-green-700);
+}
+
+[data-theme="dark"],
+[data-theme="dark"] * {
+  --fui-color-brand: var(--fui-color-green-500);
+}
+...
+```
+
+### Using Components
+You can use the components by importing them into your React App file
+```js
+import React, { Component } from 'react'
+import { FuiBadge } from 'practical-ui-kit/fui-badge';
+
+function App() {
+  return (
+    <div>
+      <FuiBadge label='label' />
+    </div>
+  );
+}
+```

fui-badge/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-badge/index.js",
+  "module": "../dist/fui-badge/index.mjs",
+  "types": "../dist/fui-badge/index.d.ts"
+}

fui-button/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-button/index.js",
+  "module": "../dist/fui-button/index.mjs",
+  "types": "../dist/fui-button/index.d.ts"
+}

fui-checkbox/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-checkbox/index.js",
+  "module": "../dist/fui-checkbox/index.mjs",
+  "types": "../dist/fui-checkbox/index.d.ts"
+}

fui-empty/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-empty/index.js",
+  "module": "../dist/fui-empty/index.mjs",
+  "types": "../dist/fui-empty/index.d.ts"
+}

fui-modal/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-modal/index.js",
+  "module": "../dist/fui-modal/index.mjs",
+  "types": "../dist/fui-modal/index.d.ts"
+}

fui-notification/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-notification/index.js",
+  "module": "../dist/fui-notification/index.mjs",
+  "types": "../dist/fui-notification/index.d.ts"
+}

fui-popover/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-popover/index.js",
+  "module": "../dist/fui-popover/index.mjs",
+  "types": "../dist/fui-popover/index.d.ts"
+}

fui-radio/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-radio/index.js",
+  "module": "../dist/fui-radio/index.mjs",
+  "types": "../dist/fui-radio/index.d.ts"
+}

fui-select/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/fui-select/index.js",
+  "module": "../dist/fui-select/index.mjs",
+  "types": "../dist/fui-select/index.d.ts"
+}