ui-kit: init

Author: batazor

.adr-dir

@@ -0,0 +1 @@
+docs/ADR/decisions

.editorconfig

@@ -0,0 +1,33 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+
+# Tab indentation (no size specified)
+[{Makefile,go.mod,go.sum,*.go,*.go.tmpl}]
+indent_style = tab
+indent_size = 4
+
+# Use tabs
+[**.mk]
+indent_style = tab
+indent_size = 4
+
+# Use tabs
+[**.xml]
+indent_size = 4
+
+[*.rs]
+trim_trailing_whitespace = true
+indent_size = 4
+
+[*.py]
+indent_size = 4

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitattributes

@@ -0,0 +1,12 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+*.sops.yaml diff=sopsdiffer
+
+# do not show lock files while doing git diff
+package-lock.json -diff
+yarn.lock -diff
+go.sum -diff linguist-generated
+
+# config for Gitlab 16.10+ --------------------------------------------------------------------------------
+# Collapse all files with a .txt extension
+*.txt gitlab-generated

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.eslintcache
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Storybook
+storybook-static

.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+storybook-static

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from '@storybook/experimental-nextjs-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-themes',
+    '@storybook/addon-interactions',
+    '@storybook/addon-controls',
+    '@chromatic-com/storybook',
+    '@storybook/addon-a11y',
+    '@storybook/addon-coverage',
+    '@storybook/addon-jest',
+    'storybook-addon-next',
+    'storybook-addon-next-router',
+  ],
+
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+
+  framework: {
+    name: '@storybook/experimental-nextjs-vite',
+    options: {}
+  },
+
+  features: {},
+  typescript: {},
+
+  docs: {}
+}
+
+export default config

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.tsx

@@ -0,0 +1,45 @@
+import { Preview } from '@storybook/react'
+import { Provider } from 'react-wrap-balancer'
+
+import '@fontsource/roboto/300.css'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/500.css'
+import '@fontsource/roboto/700.css'
+import '@fontsource/caveat'
+import '@fontsource/material-icons'
+import { ThemeProvider } from '@mui/material/styles'
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'
+import { ThemeProvider as ThemeProviderNext } from 'next-themes'
+import { LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+
+import '../src/theme/styles.css'
+import { theme } from '../src/theme/theme'
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      return (
+        // @ts-ignore
+        (<ThemeProviderNext
+          enableSystem
+          attribute="class"
+          defaultTheme={'light'}
+        >
+          <ThemeProvider theme={theme}>
+            <InitColorSchemeScript />
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <Provider>
+                <Story />
+              </Provider>
+            </LocalizationProvider>
+          </ThemeProvider>
+        </ThemeProviderNext>)
+      );
+    },
+  ],
+
+  tags: []
+}
+
+export default preview

README.md

@@ -0,0 +1,42 @@
+## @shortlink/ui-kit
+
+<img width='200' height='200' src="./docs/public/logo.svg">
+
+> [!NOTE]
+> The UI Kit is a collection of React components that are used in the ShortLink app.
+
+### Installation
+
+```bash
+npm install @shortlink/ui-kit # for GitLab registry
+npm install shortlink-ui-kit        # for NPM registry
+```
+
+### Usage
+
+```jsx
+import { ToggleDarkMode } from '@shortlink/ui-kit'
+
+const App = () => {
+  return <ToggleDarkMode />
+}
+```
+
+### Storybook
+
+The UI Kit is documented with Storybook. You can run it locally with:
+
+```bash
+npm run storybook
+```
+
+### Stack
+
+- ReactJS
+- Pretty code base
+  - Typescript
+  - ESLint/Prettier
+- Pretty UI
+  - TailwindCSS
+- Storybook (for UI)
+- Jest

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

docs/public/logo.svg

@@ -0,0 +1,8 @@
+// const shortlink = require('eslint-config-shortlink')
+
+export default [
+  // ...shortlink,
+  {
+    ignores: ['.*', 'node_modules', 'dist', 'storybook-static'],
+  },
+]