Merge pull request #494 from Trendyol/next

This is the first stable release of Baklava Design System web implementation.

First stable release includes a list of components written as HTML Custom Elements (aka Web Components) as well as their React Wrappers. Included components are:

Alert
Badge
Button
Checkbox, Checkbox-Group
Dialog
Drawer
Dropdown
Icon
Pagination
Popover
Progress-Indicator
Radio, Radio-Group
Select
Switch
Tab, Tab-Group, Tab-Panel
Textarea
Tooltip
Stable release will mean that, we'll not publish breaking changes until v3, so you will able to safely upgrade Baklava to any 2.X versions.

For new features and fixes, we'll continue to have immediate beta releases. Then stable releases will be scheduled once we think it's ready and needed. We'll keep to do stable releases often but not as often as every commit.

BREAKING CHANGE:

This is a complete rewrite of previous UI Library. v1.x is no longer supported.

Contributors

This release has 21 direct contributors. Thanks all of them. ❤️

@muratcorlu @buseselvi @leventozen @DamlaDemir @ayhandoslu @baspinarenes @koulgar @mehmetranas @alibalbars @batuhantozun @olkeoguz @mustafafrw @ogunb @Enes5519 @ozkersemih @pratikgaloria @yasin749 @AykutSarac @umitkucuk @hilkbahar @mstfymrtc

Also there are many more supporters who report issues, give ideas and encourages others to be part of this initiative.

.editorconfig

@@ -1,4 +1,4 @@
-[*.{js,jsx,ts,tsx,vue}]
+[*.*]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,13 @@
+node_modules/*
+docs/*
+dist/*
+docs-src/*
+rollup-config.js
+custom-elements.json
+.history/
+storybook-static/
+*.js
+.github/
+.octane-ci/
+.bin/
+.docksal/

.eslintrc.js

@@ -1,32 +1,28 @@
 module.exports = {
   root: true,
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  extends: ['eslint:recommended', 'prettier', 'plugin:storybook/recommended'],
   env: {
-    node: true,
-    jest: true,
+    browser: true
   },
-  'extends': [
-    'plugin:vue/strongly-recommended',
-    '@vue/standard',
-    '@vue/typescript'
-  ],
-  plugins: ['jest', 'import', 'vue'],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'semi': ['error', 'always'],
-    'comma-dangle': ['error', 'always-multiline'],
+  globals: {
+    process: 'readonly'
   },
-  parserOptions: {
-    parser: 'babel-eslint',
+  rules: {
+    strict: ['error', 'never']
   },
-  overrides: [
-    {
-      files: [
-        '**/*.{j,t}s?(x)',
-      ],
-      env: {
-        jest: true,
-      },
-    },
-  ],
-};
+  overrides: [{
+    files: ['*.ts'],
+    parser: '@typescript-eslint/parser',
+    extends: ['plugin:@typescript-eslint/recommended'],
+    plugins: ['@typescript-eslint']
+  }, {
+    files: ['web-test-runner.config.js'],
+    env: {
+      node: true
+    }
+  }]
+};

.gitconfig

@@ -0,0 +1,2 @@
+[commit]
+  template = .gitmessage

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,4 @@
+contact_links:
+   - name: Ask a question
+     url: https://github.com/trendyol/baklava/discussions
+     about: Ask questions and discuss with other community members

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/new-component-definition.md

@@ -0,0 +1,58 @@
+---
+name: New Component Definition
+about: Use this template to define implementation details of a new component
+title: "{name} Component"
+labels: baklava-ds, enhancement
+assignees: ''
+
+---
+
+## Design
+
+[Figma Design Document
+]()
+
+## Implementation
+
+General usage example:
+
+```html 
+<bl-button>Example</bl-button>
+```
+
+### Rules
+
+Put some rules about how this component should behave and implemented
+
+* Rule 1
+* Rule 2
+
+## API Reference:
+
+### `bl-{name}` component
+
+Description
+
+#### Attributes
+
+| Attribute | Description | Default Value |
+| --------------- | --------------- | --------------- |
+| attr (`string`) | attr desc | - |
+
+#### Slots
+
+| Name | Description | Default Content |
+| --------------- | --------------- | --------------- |
+| `default` slot | What to put | - |
+
+#### Events
+
+| Event | Description |
+| --------------- | --------------- |
+| `bl-{event-name}` | Event description |
+
+#### CSS Custom Properties
+
+| Property | Description | Default Value |
+| --------------- | --------------- | --------------- |
+| `—bl-name` | Property desc | - |

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/publish-chromatic.yml

@@ -0,0 +1,26 @@
+name: Publish Chromatic
+
+on:
+  workflow_call:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Set Node env
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run build
+        run: npm run build
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/publish-storybook.yml

@@ -0,0 +1,44 @@
+name: Publish Storybook
+
+on:
+  workflow_call:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set Node env
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run build
+        run: npm run build
+      - name: Build Storybook
+        run: npm run build-storybook
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: './storybook-static/.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/pull-request.yml

@@ -0,0 +1,18 @@
+name: 'Verify and Preview'
+
+on:
+  pull_request:
+    branches:
+      - next
+
+permissions:
+  pull-requests: read
+
+jobs:
+  verify:
+    uses: trendyol/baklava/.github/workflows/verify.yml@next
+    secrets: inherit
+  preview:
+    uses: trendyol/baklava/.github/workflows/publish-chromatic.yml@next
+    needs: verify
+    secrets: inherit

.github/workflows/release.yml

@@ -0,0 +1,38 @@
+name: Release
+
+on:
+  workflow_call:
+    secrets:
+      TRENDYOL_JS_NPM_TOKEN:
+        required: true
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Set Node env
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install dependencies
+        run: npm ci
+      - name: Create env file with release config
+        run: |
+          touch .env
+          echo RELEASE=true >> .env
+      - name: Run build
+        run: npm run build
+      - name: Create build artifact
+        uses: actions/upload-artifact@master
+        with:
+          name: build-output
+          path: dist/
+      - name: Publish
+        run: npx semantic-release@19
+        env:
+          NPM_TOKEN: ${{ secrets.TRENDYOL_JS_NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}